數據表響應不起作用第一次

我似乎無法做出我的數據表的響應式工作。我已經嘗試了使用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)

我得到這個工作，但我沒有找到它真的是一個答案。將繼續嘗試找到一種更乾淨的方式來做到這一點

來源

2017-07-04 Sérgio Reis

這不是什麼正確的答案在我看來，但它是一種解決方法。由於我正在使用步調，無論何時步調完成，我都會檢查數據表是否已初始化，如果是，請調整列。喜歡這個

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

還是要感謝一個更好，更值得信賴的答案，所以如果還有人有一個想法。謝謝

來源

2017-07-04 10:38:58

數據表響應不起作用第一次

回答

相關問題