某些行上的Jquery Datatable Colspan

前端之家收集整理的这篇文章主要介绍了某些行上的Jquery Datatable Colspan前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,我有一个 Jquery json调用.看起来有点像这样.
$('#StockInvetoryReportList').dataTable({
        "filter": false,"bLengthChange": false,"bPaginate": false,"bProcessing": true,"bServerSide": true,"sAjaxSource": "@Url.Action("GetStockInventoryBalance","Reports")","aoColumns": [{ "mData": "Date"},{ "mData": "Name" },{ "mData": "Quantity" },{ "mData": "isSummary" }
    ],"fnServerParams": function (aoData) {
                aoData.push({ "name" : "StockNo","value": $('#MaterialName').val() }),{ "name": "ReportDate","value": $('#ReportDate').val() };
            }
    });

它会生成此表:

+------------+---------+----------+------------+
|    Date    | Name    | Quantity | Is Summary |
+------------+---------+----------+------------+
| 10/01/2015 | Wire    | 500      | False      |
+------------+---------+----------+------------+
| 10/05/2015 | Wire    | 500      | False      |
+------------+---------+----------+------------+
| 10/15/2015 | Wire    | 600      | False      |
+------------+---------+----------+------------+
| 10/18/2015 | Wire    | 100      | False      |
+------------+---------+----------+------------+
| 10/19/2015 | Wire    | 200      | False      |
+------------+---------+----------+------------+
| 10/31/2015 | October | 1900     | True       |
+------------+---------+----------+------------+

如果摘要为true,我想合并前2列.它看起来应该是这样的.

+------------+------+----------+------------+
|    Date    | Name | Quantity | Is Summary |
+------------+------+----------+------------+
| 10/01/2015 | Wire | 500      | False      |
+------------+------+----------+------------+
| 10/05/2015 | Wire | 500      | False      |
+------------+------+----------+------------+
| 10/15/2015 | Wire | 600      | False      |
+------------+------+----------+------------+
| 10/18/2015 | Wire | 100      | False      |
+------------+------+----------+------------+
| 10/19/2015 | Wire | 200      | False      |
+------------+------+----------+------------+
| October           | 1900     | True       |
+-------------------+----------+------------+

当然,列表中会有更多的月份.非常感谢您的帮助

解决方法

TheProvost.我花了很多时间来解决这个问题,我终于明白了.我希望这将有所帮助.

以下是您的问题的答案:

var dgv_StockInvetoryReportList = $('#StockInvetoryReportList').dataTable({
        "filter": false,"bSort": false,"aoColumns": [{ "mData": "Date","mRender": function (data,type,full) { return dtConvFromJSON(data); } },{ "mData": "isSummary" },],"fnServerParams": function (aoData) {
            aoData.push({ "name": "StockNo","value": $('#MaterialName').val() });
            aoData.push({ "name": "ReportDate","value": $('#ReportDate').val() });
        },//Here is the answer that I've created,//All you have to do is to insert ID in every row that your datatable
       //created
      'fnCreatedRow': function (nRow,aData,iDataIndex) {   
           var cells = $('td',$(nRow));
           //I suggest you to make the word "TOTAL SUMMARY" instead of 
           //name of the month.. ^_^
           if ($(cells[1]).text().indexOf("//Insertthemonthhere") != -1) {
             $(nRow).attr('class','//Name of the Class');
           }
       },//And here is where the cells span
       "drawCallback": function () {
             $("tbody").find("tr.total").each(function () {
                  var cells = $('td',this);
                  $(cells[1]).attr('colspan',3); //adding span by 3
                  $(cells[2]).remove(); //remove the cell 
                  $(cells[0]).remove(); //remove the cell
             });

       }
});

我希望它会奏效. -干杯! ^ _ ^

–KKK

猜你在找的jQuery相关文章