Datatable Responsive Multiple Tables

Datatable Responsive Multiple Tables

adrielzxdfadrielzxdf Posts: 3Questions: 1Answers: 0

Hi,

I have created a page with multiple Datatable tables, and have implemented the respective responsive files. The first table works responsively, but I have noticed that any tables after that does not. I would like to know if it would be possible to make all the Datatable tables on my page responsive?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,235Questions: 1Answers: 10,209 Site admin

    Can you link to the page showing the issue please.

    Allan

  • adrielzxdfadrielzxdf Posts: 3Questions: 1Answers: 0

    Hi,

    The site is still in development stage, hence is not accessible online.

    Basically, this is how I initialise the responsive Datatable, along with the responsive CSS and JS files.

    <table id="openTables" class="table mail-table nowrap" cellspacing="0" width="100%">
        //...
    </table>
    
    <table id="closedTables" class="table mail-table nowrap" cellspacing="0" width="100%">
        //...
    </table>
    
    $('.table').dataTable( {
        "responsive": true,
        //...
    });
    

    I have tried initialising the two tables separately with their ids, but the responsive part only still work on the first table.

  • allanallan Posts: 62,235Questions: 1Answers: 10,209 Site admin
    Answer ✓

    Seems to work okay for me: http://live.datatables.net/kaluguxi/1/edit

    Allan

  • adrielzxdfadrielzxdf Posts: 3Questions: 1Answers: 0
    edited December 2014

    Thanks for your reply. After seeing your example, I realised that the problem lies in bootstrap.css hiding the datatable as the tables are placed in different tabs. Have not found a solution to post yet, but at least I found out where the problem is. Thanks!

    Edit:

    .tab-content > .tab-pane {
      display: none;
    }
    

    This line was the cause of the problem.

    2nd edit:

    Problem has been solved since I figured out where it lies. The solution was from a previous discussion, https://datatables.net/forums/discussion/23641/responsive-recalc-undefined
    Tabs were hidden, so responsive tables needed to be recalc.

This discussion has been closed.