Datatables responsive not working when initialised with no data

Question

I'm using the Datatables responsive extension on a datatable with ajax sourced server-side data. Initialisation is like this:

 var oTable = $('#sales-report').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": $("#rooturl").val() + '/Reporting/Reports/PopulateDatatable',
            "data": function ( d ) {
                return $.extend( {}, d, {
                    "date_start_filter": $('#FilterDateStart').val(),
                    etc...
             });
        }
    },
    'columns': [
                {
                    'data': 1
                },
                 etc...
               ]
      });

The table looks like this, the responsive class is the initialiser:

<table class="table responsive table-bordered table-striped table-highlight nowrap " id="sales-report" width="100%" >
    <thead>
       <tr>
          <th>Date</th>
          <th>SKU</th>
          etc....
       </tr>
    </thead>
    <tbody></tbody>
</table>

When the page loads, there is no data in the table. The user then chooses filtering options and hits search which calls draw().

Assuming data is returned from the search, the datatable works fine, but the responsive 'collapsing' feature is not enabled. If the page is then refreshed without changing anything else, then the collapsing works.

I've tried initialising the table differently but the results are still the same. I'm sure this has something to do with the fact that the data is ajax sourced, but I'm now stuck. Any ideas?

Gyrocode.com · Accepted Answer · 2016-07-29 19:48:57Z

2

SOLUTION

Try to put the following code after the search() to recalculate the widths used by responsive extension after a change in the display.

$('#sales-report').DataTable()
   .columns.adjust()
   .responsive.recalc();

See responsive.recalc() API method for more information.

DEMO

See this jsFiddle for code and demonstration.

LINKS

See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.

edited Jul 29, 2016 at 19:48

answered Dec 22, 2015 at 18:52

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Victor Art · Accepted Answer · 2020-06-07 18:41:41Z

0

I added <div class="table-scrollable"> before the table.

<div class="table-scrollable">
    <table class="table responsive table-bordered table-striped table-highlight nowrap " id="sales-report" width="100%" >
        <thead>
           <tr>
              <th>Date</th>
              <th>SKU</th>
              etc....
           </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

answered Jun 7, 2020 at 18:41

Victor Art

11 bronze badge

Collectives™ on Stack Overflow

Datatables responsive not working when initialised with no data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related