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
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With