Question

数据表网站上有一个工作示例： 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();
  }
}

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

我尝试用“激活”替换“show”，但它似乎不起作用。还有其他人有这个问题吗？我无法弄清楚如何使它工作。

Answer 1

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

Answer 2

我刚在another thread发布了一个解决此问题的工作方案。适用于多个选项卡中的多个表。这是代码：

$(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);

});

Answer 3

myTab3是标签

的ID

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

        });

无法正确显示Datatables和Jquery选项卡

3 个答案: