"Semi-dynamic" colspan
"Semi-dynamic" colspan
I have seen a lot of questions regarding dynamic colspans.
Just wanted to show a simple solution i use in one of my own projects. Maybe it can be usefull for someone else.
Problem: Whenever DataTables draw a row that should be shown as a separator, i want the row to span the full length of the table.
'createdRow': function(row, data, dataIndex) {
if (typeof data['DT_RowClass'] != 'undefined' && data['DT_RowClass'] == 'separator')
{
$('td:not(.variant)', row).remove();
$('td.variant', row).prop('colspan', 6);
}
}
My columns are named: variant, d0, d1, d2, d3 and d4.
I still have data (empty) in the other five columns (d0 to d4), so the retrieval of data via ajax does not break. But those columns are just removed when they have been created.
A working example can be seen here:
http://www.trykpriser.dk/produkter/tryksager/visitkort/visitkort-samtryk-121
Replies
But it could be nice with something like this:
DT_ColSpan = "0,6"
:-)An "DataTables-attribute" just like
DT_RowClass
andDT_RowId
.When DataTables comes across this "attribute" it will span column 0 for 6 columns.
Or maybe even something like this:
DT_ColSpan = "0,2|2,4"
and span column 0 by 2 columns and column 2 by 4.Of course there has to be data in all six columns in the ajax-source, but the columns being spanned could just be empty values.
But all of this is just a dream ;-) My workaround works as needed for the moment :-)
Supporting colspan / rowspan in the -
tbody
is something that is is really non-trivial when you take filtering and sorting into account unfortunately. Long term I would like to see it in DataTables core, but it isn't likely to happen any time soon.Nice workaround though :-)
Allan
Very nice, thank you!
Clever solution! I can add confirmation that this technique also works in combination with the rowsGroup plugin (https://github.com/ashl1/datatables-rowsgroup), in otherwords allowing colspans and rowspans simultaneously, at least in the non-sortable but ajax-fed tables I'm building.