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

错误的屏幕截图 DataTables Error

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

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

1 个答案: