jQuery UI 选项卡中的 jQuery DataTables

Question

如何调整 jQuery UI 选项卡中的 jQuery DataTables 列？

这是我的 JS 代码：

$('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
});

$('#myTable').DataTable();

这就是 DataTables 建议集成的方式，但我必须如何
自定义代码才能使用我的点击功能：

$(document).ready(function() {
$("#tabs").tabs( {
    "activate": function(event, ui) {
        $( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
    }
} );

$('table.display').dataTable( {
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": false,
    "jQueryUI": true
} );
} );

https://datatables.net/examples/api/tabs_and_scrolling.html

Answer 1

尝试将函数添加到您的点击事件中：

$('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
   $('table.display').DataTable().columns.adjust();
});

或者根据数据表版本，旧的 api 版本也应该可以工作：

$('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
   $('table.display').dataTable().fnAdjustColumnSizing();
});