"Semi-dynamic" colspan

"Semi-dynamic" colspan

schaefnerschaefner Posts: 3Questions: 0Answers: 0
edited August 2015 in Free community support

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

  • schaefnerschaefner Posts: 3Questions: 0Answers: 0
    edited August 2015

    But it could be nice with something like this: DT_ColSpan = "0,6" :-)

    An "DataTables-attribute" just like DT_RowClass and DT_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 :-)

  • allanallan Posts: 63,760Questions: 1Answers: 10,510 Site admin

    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

  • protasovamsprotasovams Posts: 11Questions: 2Answers: 0

    Very nice, thank you!

  • alanngalanng Posts: 2Questions: 0Answers: 0

    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.

This discussion has been closed.