数据表响应第一次不起作用答案

【问题标题】：Datatables responsive doesn't work first time数据表响应第一次不起作用
【发布时间】：2017-07-04 09:15:05
【问题描述】：

我似乎无法让我的数据表响应式工作。我尝试了多种解决方案，包括使用 CDN、更改表格宽度、添加表格响应、更改左侧加号的位置等等。

奇怪的是，第二次绘制表格时它确实有效，例如如果我运行$("table.dataTable").resize(); 我想过在 ajax 调用结束时调用它，但这会导致堆栈溢出，因为它几乎是在循环中。这是我定义数据表的方式。

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>

这是我在 javascript 中初始化它的方法（使用 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,
});

我尽力缩进代码，但它不像文本编辑器或 ide ^^。

更新：经过一段时间解决修复的想法后，我注意到问题可能在于它需要渲染的时间以及它“重新调整”列的时间。

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

我得到了这个工作，但我发现它不是一个真正的答案。将继续努力寻找更清洁的方法

【问题讨论】：

标签： jquery twitter-bootstrap-3 datatable datatables

【解决方案1】：

在我看来，这绝不是正确的答案，但它是一种解决方法。由于我使用的是速度，每当速度完成时，我都会检查数据表是否已初始化，如果是，则调整列。喜欢这个

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

仍然会感谢一个更好，更值得信赖的答案，所以如果有人仍然有想法。谢谢

【讨论】：

【解决方案2】：

这可能会有所帮助

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

所以，在你的情况下，它会变成这个

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

这解决了第一次加载时表格宽度不正确的问题。它可能会有所帮助。

【讨论】：