无法正确显示数据表和 Jquery 选项卡答案

【问题标题】：Cannot get Datatables and Jquery Tabs to display correctly无法正确显示数据表和 Jquery 选项卡
【发布时间】：2013-06-18 20:03:56
【问题描述】：

这里的数据表网站上有一个工作示例： 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”替换为“activate”，但它似乎不起作用。还有其他人有这个问题吗？我不知道如何使它工作。

【问题讨论】：

如果您将“show”替换为“activate”，则事件会被正确调用，例如，在 jQuery UI 1.10.x（最新）中调整了列的大小 - 同样，没有“激活”选项卡并且表初始化正确。什么不起作用？你确定你已经正确加载了 jQueru UI js/css 吗？
我真的希望他们有一个示例，其中数据表存在于多个 ajax 元素而不是单个页面中。

标签： jquery jquery-ui datatables jquery-tabs

【解决方案1】：

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

【讨论】：

不，show 与 jQuery UI 选项卡明确相关。将show 替换为activate 是正确的。正如 jQuery-docs 所说，“show”已从 UI 1.10 中明确删除 ...
这是一个分叉的 jsFiddle jsfiddle.net/tNRwZ - 与“工作”示例比较：如果没有激活列，则永远不会调整大小（永远不会调用事件）
谢谢，大卫康拉德。我已经从我的答案中删除了不正确的假设，并更新了 jsfiddle 的链接。
嘿 davidkonrad ，你能告诉我 .. 我怎么能显示响应。分别对应用户的选项卡（我的意思是有 3 个选项卡，我希望登录的用户只能访问他的相应选项卡，其他选项卡应该显示或不活动或不可点击）

【解决方案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);

});

【讨论】：

【解决方案3】：

myTab3 是标签的 ID

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

        });

【讨论】：