DataTables responsive multiple fixed header

DataTables responsive multiple fixed header

FrazeColderFrazeColder Posts: 11Questions: 8Answers: 0

Hey Guys,

I have a simple table which I get to work with DataTables. I have a multiple fixed header and this is working. The only exception is when in comes to make the table responsive... If you simply delete the multiple header and only have a single fixed header row it's work. But not when you have a multiple fixed header.. Only one of the fixed header rows will be responsive and the other one will not be responsive..

I have followed this code so far: https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html

Here you can test my table and code: https://jsbin.com/wicekeyozi/edit?html,js,output

However, I think the responsive solution provided by DataTables and Bootstrap is simply not made for multiple headers.. Is there any way to make it working for multiple headers or does anyone of you has another solution?

Kind regards and Thank You!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Thanks for the test case! The issue isn't FixedHeader as such, but rather Responsive. I'm afraid it doesn't currently support "complex" headers (i.e. more than a single row). That is something that I'm actually working on at the moment in DataTables core for better support throughout DataTables and its extensions.

    Allan

  • FrazeColderFrazeColder Posts: 11Questions: 8Answers: 0

    @allan Can you tell me roughly when you guys have finished that?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    It isn't likely to be before the end of the year I'm afraid. It will need DataTables v2 to be released before it is fixed properly.

    Allan

  • macfs36macfs36 Posts: 1Questions: 0Answers: 0

    Hello, does this have a solution?

    To solve the problem in a not very good way I changed the dataTables.responsive.js file in the _setColumnVis function by adding these two lines:

    var nomeDaTabela = dt.tables().nodes().to$().attr('id');
    $('#' + nomeDaTabela + ' thead tr:eq(1) th:eq(' + col + ')').css('display', display);

    But I would like a better solution from you.

    Thank you.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I'd like a better solution from me too! It is on the cards for DataTables v2, but it is not something that we've yet prioritised as there is a lot of work involved for it.

    What you have will work in the short term, as long as you don't use colspan / rowspan and don't use column visibility.

    Allan

  • dmarostegadmarostega Posts: 1Questions: 0Answers: 0

    looking forward to v2

This discussion has been closed.