Datatables responsive doesn't work first time

Question

I can't seem to make my datatable responsive work. I've tried multiple solutions from using cdn's, changing table width, adding table responsive, changing the location of the plus sign to the left and so on.

Weirdly enough, it does work the second time the table is drawn for example if I run $("table.dataTable").resize(); I thought about calling this on the end of the ajax call but this causes a stackoverflow since it's pretty much on a loop. Here is how I define my datatables.

Html:

<div class="col-md-12 col-sm-12 col-xs-12" id="listView">
  <table id="tabela" class="table table-striped table-bordered table-hover table-responsive">
    <thead>
      <tr>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

And here is how I initialize it in javascript (with jquery adapter)

JS:

tabelaGlobal = $("#tabela").DataTable({
   responsive: true,
   processing: true,
   serverSide: true,
   info: true,
   ajax: {
      url: routeListInfo,
      method: "POST",
      data: function (data) {
         data.search = typeof tabelaGlobal !== "undefined" ? tabelaGlobal.search() : "";
         delete data.columns;
      }
   },
   "lengthChange": true,
   "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
   "language": {
      "lengthMenu": "_MENU_ linhas por página",
      "zeroRecords": "Desculpe nada encontrado...",
      "info": "Pagina _PAGE_ de _PAGES_",
      "infoEmpty": "",
      "processing": "",
      "search": "Procurar:",
      "emptyTable": "",
      "paginate": {
        "first": "Primeiro",
        "last": "Último",
        "next": "Próximo",
        "previous": "Anterior"
      },
      "infoFiltered": ""
   },
    columns: [
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            var spanEditar = document.createElement('span');
            $(spanEditar)
               .addClass("btn btn-primary btn-xs")
               .css('color', 'white')
               .css('cursor', 'pointer')
               .html('<i class="fa fa-pencil" aria-hidden="true"></i>')
               .attr("onClick", 'openEdit(\'' + full.id + '\')');

             var spanApagar = document.createElement('span');
             $(spanApagar)
               .addClass("btn btn-danger btn-xs")
               .css('color', 'white')
               .css("background-color", "#dd4b39")
               .css('cursor', 'pointer')
               .html('<i class="fa fa-times" aria-hidden="true"></i>')
               .attr("onClick", 'openDelete(\'' + full.id + '\')');

                return $(spanEditar).clone().wrap('<div/>').parent().html() + $(spanApagar).clone().wrap('<div/>').parent().html();
         }
      },

     ],
   "autoWidth": true,
   "order": [[0, "desc"]],
   "fnDrawCallback": function (result) {
      //$("table.dataTable").resize();
       global_resultado = result.json.data;
    },
    iDisplayStart: iDisplayStart,
});

I tried my best indenting the code but its never like a text editor or ide ^^.

Update: After sometime working around the idea of a fix,I noticed that the problem may be in the time it needs to render and the time it "readjusts" the columns.

setTimeout(function(){
   tabelaGlobal.columns.adjust().responsive.recalc();
},1000)

I got this to work but I don't find it really an answer. Will keep trying to find way a cleaner way of doing it

Sérgio Reis · Accepted Answer · 2017-07-04 10:38:58Z

1

This isn't by any means the correct answer in my opinion but it is a workaround. Since I'm using pace, whenever pace finishes I check if a datatable is initialized and if it is, adjust columns. LIke this

Pace.on('done', function () {
  if (typeof tabelaGlobal !== "undefined")
    tabelaGlobal.columns.adjust().responsive.recalc();
});

Still would thank a better and more trustworthy answer so if anyone still has an idea. Thanks

answered Jul 4, 2017 at 10:38

Sérgio Reis

2,5232 gold badges22 silver badges32 bronze badges

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

Comments

Sam S · Accepted Answer · 2022-04-14 21:17:48Z

0

This might help

$('#table-id').DataTable({
    "autoWidth": false
});

So, in your case it would be changing to this

tabelaGlobal = $("#tabela").DataTable({
    ...
    "autoWidth": false
    ...
});

This worked on an issue where the width of a table was being incorrect on the first load. It might probably be helpful.

edited Apr 14, 2022 at 21:17

answered Jun 25, 2020 at 23:29

Sam S

3564 silver badges12 bronze badges

Collectives™ on Stack Overflow

Datatables responsive doesn't work first time

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