jQuery的數據表 - 在谷歌Chrome和Firefox

橫向滾動我需要在我的jQuery數據表使用水平滾動，比我使用的屬性：jQuery的數據表 - 在谷歌Chrome和Firefox

scrollX: true

但是，這只是在Internet Explorer中運行。在Google Chrome和FireFox中，它會打破標題中的表格，並且不會顯示水平滾動（在自己的標題中爲空白行）。

有人已經經歷過這個問題或知道如何解決？

我的代碼：

// DataTable 
var tipoAcao = $("#hdn_TipoAcao").val(); 

var modulo = $("#hdn_Modulo").val(); 

var form = null; 
var formHtml = ''; 

form = $('#fdsDamIss'); 
form.remove(); 

form = $('<fieldset id="fdsDamIss" class="Formulario">').appendTo('div.Conteudo'); 

formHtml += '<div class="Conteudo">'; 
formHtml += '<h1 class="Titulo">Lista de DAM-ISS</h1>'; 
formHtml += '<hr class="SeparadorTitulo" />'; 
formHtml += '<table id="idTabelaDamIss" class="DataTable table stripe hover row-border order-column">'; 
formHtml += ' <thead>'; 
formHtml += '  <tr>'; 
formHtml += '   <th>DAM</th>'; 
formHtml += '   <th>Situação</th>'; 
formHtml += '   <th>Venc. Original</th>'; 
formHtml += '   <th>Venc. Atualizado</th>'; 
formHtml += '   <th>Valor Original</th>'; 
formHtml += '   <th>Valor Atualizado</th>'; 
//economico 
if (modulo == 3) { 
    formHtml += '   <th>Tipo ISS</th>'; 
} 
formHtml += '   <th>Ações</th>'; 
formHtml += '  </tr>'; 
formHtml += ' </thead>'; 
formHtml += ' </table>'; 
formHtml += ' </div>'; 

$(formHtml).appendTo('#fdsDamIss');

var table = $('#idTabelaDamIss').dataTable({ 
    iDisplayLength: 10, 
    lengthMenu: [[5, 10, 20], [5, 10, 20]], 
    scrollX: true, 
    bFilter: false, 
    bAutoWidth: false, 
    processing: true, 
    serverSide: true, 
    ajax: ajax, 
    language: { 
     processing: "Processando...", 
     lengthMenu: "Mostrar _MENU_ registros", 
     zeroRecords: "Não foram encontrados resultados", 
     emptyTable: 'Nenhum registro encontrado', 
     info: 'Mostrando de <b>_START_</b> até <b>_END_</b> de um total de <b>_TOTAL_</b> registros', 
     infoEmpty: 'Mostrando de <b>0</b> até <b>0</b> de um total de <b>0</b> registros', 
     infoFiltered: '(Filtrados de _MAX_ registros)', 
     infoPostFix: '', 
     paginate: { 
      sPrevious: "Anterior", 
      sNext: "Próximo" 
     }, 
    } 
    , columns: 
    [ 
     { 
      mData: "Id", 
      sName: "Id", 
      width: "7%" 
     }, 
     { 
      mData: "SituacaoPagamento.Descricao", 
      sName: "SituacaoPagamento.Descricao", 
      width: "8%", 
      bSort: false, 
      bSortable: false 
     }, 
     { 
      mData: "VencimentoOriginal", 
      sName: "VencimentoOriginal", 
      width: "10%", 
      render: function (data, type, row) { 
       var ano = data.substring(0, 4); 
       var mes = data.substring(5, 7); 
       var dia = data.substring(10, 8); 
       return dia + "/" + mes + "/" + ano; 
      } 
     }, 
     { 
      mData: "VencimentoAtualizado", 
      sName: "VencimentoAtualizado", 
      width: "10%", 
      render: function (data, type, row) { 
       var ano = data.substring(0, 4); 
       var mes = data.substring(5, 7); 
       var dia = data.substring(10, 8); 
       return dia + "/" + mes + "/" + ano; 
      } 
     }, 
     { 
      mData: "ValorOriginal", 
      sName: "ValorOriginal", 
      width: "10%" 
     }, 
     { 
      mData: "ValorTotal", 
      sName: "ValorTotal", 
      width: "10%" 
     } 
     , { 
      mData: null, 
      sName: "Acoes", 
      width: "50%", 
      bSort: false, 
      bSortable: false 
     } 
    ], 
    columnDefs: [ 
     { 
      "targets": -1, 
      "data": null, 
      "defaultContent": "<a class='VerNotasFiscais' href='#'> Ver Notas </a> <a> | </a> <a class='Cancelar' href='#'>Cancelar</a>" 
     }, 
    ], 
    fnServerParams: fnServerParams 
});

來源

2015-10-22 HenriqueAdm

請出示你的代碼。 – davidkonrad

原因

見this discussion on datatables.net關於這個問題。

問題結合了scrollX或scrollY選項和autoWidth: false，這導致DataTables實現滾動功能和列寬計算的問題。

SOLUTION

添加下面的數據表初始化函數下面的代碼：

$(window).resize(function() { 
    table.api().columns.adjust(); 
});

DEMO

請參閱this jsFiddle瞭解代碼和演示。

要獲得更多性能，請考慮使用debounce function以及上面的代碼，如this jsFiddle所示。

來源

2015-10-22 14:14:14

我有點困惑 - 沒有你的小提琴沒有水平滾動？那是不是我們想要使用'scrollX'？ – davidkonrad

@davidkonrad，這是複製OP問題的http://jsfiddle.net/zr8m7vra/2/。如果減少輸出窗口寬度，您可以看到滾動。 –

這裏沒有工作 – HenriqueAdm

我想你已經忘了給表一個固定的寬度也可以滾動內：

div.dataTables_wrapper { 
    width: 400px; 
    margin: 0 auto; 
}

至少它爲我的作品 - >http://jsfiddle.net/enbmqyoq/

來源

2015-10-22 14:17:12 davidkonrad

我試過這個，但是這裏沒有工作。 – HenriqueAdm

jQuery的數據表 - 在谷歌Chrome和Firefox

回答

相關問題