jQuery DataTables + columnFilter插件溢出问题与jQuery UI Tabs

Question

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

但是，在我的应用程序中，jQuery用户界面表中有这些表。一开始，由于屏幕上看不到列宽，导致dataTables没有正确计算列宽时出错(这是通过将'"bAutoWidth"：false'属性设置为false并调用绑定到选项卡select/activate操作的dataTables来修正的)。

应用程序现在需要进行列过滤，以启用我使用过jQuery DataTables列过滤器插件的数据挖掘。由于某些原因，错误再次出现，我不确定如何修复它(我假设页脚列宽度的计算不会与核心表计算同时进行)。

表的调试信息： DataTable调试 (无异常)

任何帮助都是很好的:)

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