3

数据表网站上有一个工作示例：http: //datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

但是，我相信这个例子是使用 jquery-ui 1.8 的东西，这个例子不再适用于较新版本的 jquery-ui。特别是这段代码：

"show": function(event, ui) {
  var table = $.fn.dataTable.fnTables(true);
  if ( table.length > 0 ) {
    $(table).dataTable().fnAdjustColumnSizing();
  }
}

我相信“显示”事件已被弃用：http: //jqueryui.com/upgrade-guide/1.9/#deprecated-show-event-renamed-to-activate

我尝试用“激活”替换“显示”，但它似乎不起作用。还有其他人有这个问题吗？我不知道如何使它工作。

4

3 回答 3

2

这是一个使用activate最新版本的 jQuery 和 jQuery UI http://jsfiddle.net/5AavQ/3/的工作示例。检查外部资源以查看包含哪些文件。确保包含所有外部 .js（jQuery、jQuery UI、DataTables）和 .css（jQuery UI、DataTables Demo 是可选的）文件。

于 2013-06-19T13:14:41.740 回答
1

我刚刚在另一个线程中发布了这个问题的有效解决方案。适用于多个选项卡中的多个表。这是代码：

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
activate: function (event, ui) {
    var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
    if (oTable.length > 0) {
        oTable.fnAdjustColumnSizing();
    }
}
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
    { "sWidth": "10%", "aTargets": [-1] }
]
};
// initialize data table
$('table').dataTable(optDataTables);

});
于 2013-10-02T09:41:27.067 回答
0

myTab3 是标签的 id

  $('#myTab3 a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // FYP-table is id of datatable
            $('#FYP-table').dataTable().fnAdjustColumnSizing();

        });
于 2017-05-02T14:18:33.243 回答