Le responsive Datatables ne fonctionne pas du premier coup

Question

Je n'arrive pas à faire fonctionner ma table de données réactive. J'ai essayé plusieurs solutions : utiliser des cdn, modifier la largeur du tableau, ajouter un tableau réactif, modifier l'emplacement du signe plus à gauche, etc.

Bizarrement, cela fonctionne la deuxième fois que le tableau est dessiné, par exemple si j'exécute $("table.dataTable").resize(); J'ai pensé à l'appeler à la fin de l'appel ajax mais cela provoque un stackoverflow puisque c'est pratiquement une boucle. Voici comment je définis mes tables de données.

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>

Et voici comment je l'initialise en javascript (avec l'adaptateur jquery)

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,
});

J'ai fait de mon mieux pour indenter le code mais ce n'est jamais comme un éditeur de texte ou un ide ^^.

Mise à jour : Après avoir travaillé un certain temps sur l'idée d'un correctif, j'ai remarqué que le problème pourrait être dans le temps de rendu et le temps de "réajustement" des colonnes.

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

J'ai réussi à faire fonctionner ceci mais je ne trouve pas que ce soit vraiment une réponse. Je vais continuer à essayer de trouver une façon plus propre de le faire.

Answer 1

Ce n'est pas du tout la bonne réponse à mon avis, mais c'est une solution de rechange. Puisque j'utilise pace, chaque fois que pace se termine, je vérifie si une table de données est initialisée et si c'est le cas, j'ajuste les colonnes. Comme ceci

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

Si quelqu'un a encore une idée, il serait heureux d'avoir une réponse plus fiable. Merci