jQuery UI 选项卡的 jQuery DataTables + columnFilter 插件溢出问题

Question

在我的应用程序中，我使用jQuery DataTables 1.9.4 向用户动态显示信息。实现这一点很好，效果很好。

但是在我的应用程序中，我在jQuery UI Tabs 中有这些表。起初，dataTables 无法正确计算列宽时出现错误，因为它在屏幕上不可见（通过将 '"bAutoWidth": false' 属性设置为 false 并调用oTable.fnAdjustColumnSizing(); 绑定到选项卡选择/激活操作）。

应用程序现在需要列过滤来启用我使用 jQuery DataTables Column Filter Plug-In 的数据向下钻取。由于某种原因，错误再次出现，我不确定如何修复它（我假设页脚列宽的计算不会与核心表计算同时发生）。

表的调试信息：DataTable Debug（看起来没什么异常）

任何帮助都会很棒:)

DataTables 初始化代码

        $('#tblQuotes').dataTable({
            "bJQueryUI": true,
            "aLengthMenu": [[10, 25, 50, 75, 100, 250, 500], [10, 25, 50, 75, 100, 250, 500]],
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '@Url.Content("~/Home/GetQuote")',
            "sPaginationType": "full_numbers",
            "sScrollY": 200,
            "sScrollX": "100%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true,
            "fnServerData": function Data(sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success":
                        function (msg) {
                            fnCallback(msg);
                        },
                    "failure":
                        function (errMsg) {
                            $('#errorMessage').text(errMsg);  //errorMessage with id of the div
                        }
                });
            },
            //"bLengthChange": true,
            "bSort": false,
            "bAutoWidth": true,
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                if (aData[4] == "Target") {
                    $(nRow).addClass("row_FollowUpNotComplete");
                }
            },
            "fnInitComplete": function () {
                this.fnAdjustColumnSizing(true);
            }
        }).columnFilter({
            "aoColumns": [
                            null, //Quote ID **Hidden**
                            { "type": "text", bRegex:true }, //Customer
                            { "type": "date-range" }, //Validity
                            { "type": "text", bRegex: true }, //Quoted By
                            { "type": "text", bRegex: true }, //TMF
                            { "type": "date-range" }, //Date of follow up
                            { "type": "date-range" }, //Log Date
                            { "type": "text", bRegex: true }, //Trade
            ]
        }).fnSetColumnVis(0, false);
        $('.dataTables_filter').css({ "display": "none" }); //Disable default search filter by css due to connection with column filters in the footer

错误截图

Answer 1

这似乎有点尴尬，但经过反复试验，我发现如果您注释掉/删除“sScrollXInner”属性，它似乎可以解决这个问题。我不确定这会在哪些其他情况下有所帮助，但我想它似乎可以很好地与以下内容结合使用，以帮助强制重新调整列大小：

    //DataTables property
    "fnInitComplete": function () {
        this.fnAdjustColumnSizing(true);
    }

还有：

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