Question

我有一个响应的数据表，除了标题。该表根据以下代码初始化：

  $('.datatable-objects').DataTable({
    autoWidth: false,
    responsive: true,
    scrollX: true,
    dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
    language: {
      search: '<span>Filter:</span> _INPUT_',
      lengthMenu: '<span>Show:</span> _MENU_',
      paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
    }

  });

  // Add placeholder to the datatable filter option
  $('.dataTables_filter input[type=search]').attr('placeholder','Type to filter...');

  // Enable Select2 select for the length option
  $('.dataTables_length select').select2({
      minimumResultsForSearch: Infinity,
      width: 'auto'
  });

  $('.dataTables_scrollHeadInner').css({"width":"100%"});
  $('.datatable-objects').css({"width":"100%"});
  $('.datatable-objects').on( 'draw.dt', function () {
    $('.dataTables_scrollHeadInner').css({"width":"100%"});
    $('.datatable-objects').css({"width":"100%"});
  });
});

我需要最后的css hacks，以便在窗口调整大小时适当调整大小。否则，在width属性中放置一个硬大小，并且调整大小无法正常工作。我不清楚为什么需要添加它，而在其他例子中我看到没有必要。有人建议吗？

Answer 1

假设您有“ tbl-principal”表，则只需添加如下内容：

$('#tbl-principal').dataTable().fnAdjustColumnSizing();

备注：如果需要重新调整窗口大小，则上面的代码需要放在$（window）调整大小函数上。

就我而言，我正在显示/隐藏div，所以...我只是将代码放在函数中...

就这样...正在工作！

调整大小标头不适用于DataTable js

1 个答案: