Skip to content

Instantly share code, notes, and snippets.

@michaelcox
Created November 27, 2012 17:36
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save michaelcox/4155754 to your computer and use it in GitHub Desktop.
Save michaelcox/4155754 to your computer and use it in GitHub Desktop.
Uses HTML data attributes to set rowspan in DataTables.net
$.fn.dataTableExt.oApi.fnFakeRowspan = function (oSettings) {
_.each(oSettings.aoData, function(oData) {
var cellsToRemove = [];
for (var iColumn = 0; iColumn < oData.nTr.childNodes.length; iColumn++) {
var cell = oData.nTr.childNodes[iColumn];
var rowspan = $(cell).data('rowspan');
var hide = $(cell).data('hide');
if (hide) {
cellsToRemove.push(cell);
} else if (rowspan > 1) {
cell.rowSpan = rowspan;
}
}
// Remove the cells at the end, so you're not editing the current array
_.each(cellsToRemove, function(cell) {
oData.nTr.removeChild(cell);
});
});
oSettings.aoDrawCallback.push({ "sName": "fnFakeRowspan" });
return this;
};
@gkio
Copy link

gkio commented Dec 22, 2016

can you make an example how to use it ? data-rowspan="3" and data-hide its just delete and dont make it in 3 rows

@manu1234567
Copy link

This is deleting all rows......Please let me know how I can use it

@crazydoca
Copy link

if anyone want to rowspan more than one row change script like this

if (firstOccurance !== null && firstOccurance !== undefined && val == value && rowspan > 1) {
//oData.nTr.removeChild(cell);
$(oData.nTr.childNodes[iColumn]).hide(); // hide rows
firstOccurance.rowSpan = rowspan;
}

now you can use like this

$("#example").dataTable().fnFakeRowspan(0);
$("#example").dataTable().fnFakeRowspan(1);
$("#example").dataTable().fnFakeRowspan(2);
$("#example").dataTable().fnFakeRowspan(3);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment