0

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

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

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

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

任何帮助都会很棒:)

数据表初始化代码

        $('#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

错误截图 数据表错误

4

1 回答 1

0

这似乎有点尴尬，但经过一些试验和错误后，我发现如果您注释掉/删除“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();
            }
        }
    });
于 2013-08-22T11:59:13.807 回答