DataTables/jQuery UI Tabs标题宽度错误问题

Question

有一个与DataTables + jQuery UI Tabs相关的众所周知的错误，由于DataTable最初处于隐藏状态，导致列标题无法正确计算，这会使排序图标无法显示在屏幕外面。可以在以下链接中查看示例：http://datatables.net/examples/api/tabs_and_scrolling.html。 在上面的链接中，它说要在选项卡的onActivated方法中进行如下修复：

   $("#tabs").tabs({
        active: obj["currentTabIndex"],
        activate: function(event, ui) {
            $("#example").DataTable().columns.adjust();
            chrome.storage.local.set({"currentTabIdx": ui.newPanel[0].dataset["tabIndex"]});
        }
    });

然而，正如您所看到的，我正在保存所选的选项卡，以便当用户重新加载页面时，打开相同的选项卡。重新加载时，所选的选项卡会显示，但是由于该选项卡未被选择，仅被加载，因此不触发“activate”事件。我已尝试调整“activate”、“load”、“create”等方法中的列，但均无效。是否有解决方法？

- user2381114

---

你尝试过在加载的标签上触发点击事件吗？http://stackoverflow.com/questions/3804523/activating-second-tab-in-page-load-using-jquery - Bindrid

在jquery选项卡文档中，您将发现第一个选项卡设置不会触发激活事件。 您需要以其他方式触发它或使用文档就绪事件处理程序进行设置。 - Bindrid

Answer 1

我创建了3个选项卡，每个选项卡都有自己的数据表。 我使用了如Datatables.net链接所示的滚动。在此处查看 http://jsbin.com/vawonud/edit?output

    $(document).ready(function () {
        // this section sets up the data and creates the columns defintion
        // based on the data
        dtdata = JSON.parse(f);
        var keys = Object.keys(dtdata.data[0]);
        var columns = [];
        $.each(keys, function (i, item) {
            columns.push({ data: item, title: item, name: item })
        });

        // Get the storage  value if it is there then create tabs
        var ls = localStorage.getItem("currentTabIdx");
        if (ls === null) { ls = 1; localStorage.setItem("currentTabIdx", idx); };
        $("#tabs").tabs(
            {
                active: ls - 1,
                activate: function (evt, ui) {
                    var idx = ui.newPanel.index();
                    localStorage.setItem("currentTabIdx", idx);
                    if (!$.fn.DataTable.isDataTable("#table" + idx)) {
                        $("#table" + idx).DataTable({
                            data: dtdata.data, columns: columns, order: [[idx, "asc"]], scrollY: 200,
                            scrollCollapse: true,
                            paging: false
                        });
                    }
                }
            }
            );
        // initialize the exposed table
        $("#table" + localStorage.getItem("currentTabIdx")).DataTable({
            data: dtdata.data, columns: columns, order: [[ls, "asc"]], scrollY: 200,
            scrollCollapse: true,
            paging: false
        });
    });

- Bindrid