Jquery datatable colspan on some lines

Question

So I have a jquery json call. It looks something 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 combine the first 2 columns if the 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 will be more months on the list. Your help will be greatly appreciated.

Answer 1

TheProvost. I spent many hours to solve this problem, and finally I got it. Hope this helps.

Here is the answer to 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 this works. -Cheers! ^ _ ^

- KKK