某些行上的Jquery Datatable Colspan

时间:2015-10-31 04:54:33

标签: jquery json datatables

好的,我有一个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       |
+------------+---------+----------+------------+

如果summary为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       |
+-------------------+----------+------------+

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

1 个答案:

答案 0 :(得分:7)

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

以下是您的问题的答案:

var dgv_StockInvetoryReportList = $('#StockInvetoryReportList').dataTable({
        "filter": false,
        "bLengthChange": false,
        "bPaginate": false,
        "bProcessing": true,
        "bServerSide": true,
        "bSort": false,
        "sAjaxSource": "@Url.Action("GetStockInventoryBalance", "Reports")",
        "aoColumns": [{ "mData": "Date", "mRender": function (data, type, full) { return dtConvFromJSON(data); } },
        { "mData": "Name" },
        { "mData": "Quantity" },
            { "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