Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery Datatable Colspan on Some Rows

Ok so I have a Jquery json call. It looks somewhat like this.

 $('#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() };
            }
    });

And it generates this table:

+------------+---------+----------+------------+
|    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       |
+------------+---------+----------+------------+

I want to merge the first 2 columns if is summary is true. It should look like this.

+------------+------+----------+------------+
|    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       |
+-------------------+----------+------------+

And of course there would be more months in the list. Your help would be greatly appreciated

like image 558
TheProvost Avatar asked Oct 31 '15 04:10

TheProvost


People also ask

How to add colspan in jQuery DataTables?

The problem with COLSPAN attribute is that jQuery DataTables requires one TD element for each cell in table body. The solution is to include a TD node for each cell, use COLSPAN attribute on the first cell in a group and hide the remaining cells by applying display: none CSS style.

Can we use Colspan in Datatable?

DataTables fully supports colspan and rowspan in the table's header, assigning the required order listeners to the TH element suitable for that column. Each column must have one TH cell which is unique to it for the listeners to be added.

Does Datatable support Rowspan?

In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan attributes for each cell are automatically calculated and rendered on the page for you. This allows the columns.


1 Answers

TheProvost. I've spent many hours to solve this problem, and I finally got it. I hope this will help.

Here is the answer of your problem:

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
             });

       }
});

I hope it will works. -Cheers! ^_^

--KKK

like image 68
kwingkwingko Avatar answered Sep 18 '22 10:09

kwingkwingko