Jquery 数据表修复了 IE 9 中的列问题

Question

我正在使用 jquery ui 选项卡 在同一个 div 中并排显示两个网格。使用 jquery datatables 插件显示网格。最近我在我的两个网格中添加了 固定列 的功能，这使得 IE 9 随机表现得很奇怪。
这种行为完全随机发生，但发生在两个网格之一上，而不是同时发生在两个网格上。 IE 9 在水平滚动条上显示固定列部分。它看起来像下面这样：

其他网格显示如下所示：

有趣的是，如果您整理受影响的table或在搜索文本框中输入一些字符，这个重叠部分会自动修复。
我搜索它并了解到 draw() 函数在这些操作上被调用所以我尝试在 选项卡选择事件 上手动调用此函数但是并没有解决问题。
下面是选项卡选择事件的JS代码：

$('#divEAMountDismountGridsTabs, #CurrentSpec').tabs(
    {
        select: function(event, ui)
        {
            // Do stuff here
            var tempDismount = $('#tblDismountAtt').DataTable();
            tempDismount.draw(false);

            var tempCurrentSpec = $('#tblCurrentSpec1').DataTable();
            tempCurrentSpec.draw(false);
        }
    });

下面是我在 datatable initialization 上写的 JS（两个网格都有相同的属性，所以我只是复制第一个网格的初始化）。

/*DataTable Implementation*/
    var tableDismountAtt = $('#tblDismountAtt').dataTable(
    {
        "bFilter": true,
        "bInfo": false,
        "bDestroy": true,
        "bwidth": '100%',
        //"sDom": '<"top"f>',
        'iDisplayLength':5000,
        "order": [[2, "asc"]],
         dom: "Cfrtip",
         scrollY: "140px",
         scrollX: "100%",
         paging: false,
         scrollCollapse: true,
        "aoColumnDefs" : [
                        {'bSortable' : false, 'aTargets' : [ 0 ] , "width": "80px"}, //Switch to Dismount
                        {'bSortable' : false, 'aTargets' : [ 1 ], "width": "80px"}, //Parts Status
                        {'bSortable' : true, 'aTargets' : [ 2 ], "width": "80px"}, //Sales Code
                        {'bSortable' : true, 'aTargets' : [ 3 ] , "width": "60px"}, //Price
                        {'bSortable' : false, 'aTargets' : [ 4 ], "width": "60px"}, //Currency
                        {'bSortable' : true, 'aTargets' : [ 5 ], "width": "150px"}, //Sales Code Description
                        {'bSortable' : false, 'aTargets' : [ 6 ], "width": "80px"}, //Quantity
                        {'bSortable' : false, 'aTargets' : [ 7 ], "width": "380px"}, //Remarks
                        {'bSortable' : true, 'aTargets' : [ 8 ], "width": "80px"}, //    PSO Ref No.
                        {'bSortable' : false, 'aTargets' : [ 9 ], "width": "150px"}, //Model Sub Name
                        {'bSortable' : false, 'aTargets' : [ 10 ] , "width": "80px"}, //Value
                        {'bSortable' : false, 'aTargets' : [ 11 ], "width": "150px"}, //Date
                        {'bSortable' : true, 'aTargets' : [ 12 ]},
                        {'bSortable' : true, 'aTargets' : [ 13 ]},
                        {'bSortable' : true, 'aTargets' : [ 14 ]}
                    ]

    });
    /*Freezing Dismount Attachment Columns*/       
    new $.fn.dataTable.FixedColumns( tableDismountAtt, {leftColumns: 6, heightMatch: 'auto'});

Answer 1

问题的原因是第二个网格在隐藏时进行初始化，因此当它变得可见时，控件的对齐受到干扰。 JQuery Datatables 官网也提到了这个东西。您可以阅读 here.

中的所有详细信息

为避免这种情况，您需要在网格 shows/drawn.

时调用 AdjustColumns 函数

这个函数我调用了两次：

数据表初始化时
在网格上调用绘制函数时

（起初我只是在初始化时调用这个函数，但是当我尝试使用它的智能搜索来过滤记录时，对齐再次受到干扰。）

下面是我对现在工作正常的数据表初始化代码所做的更改。

/*DataTable Implementation*/
    var tableDismountAtt = $('#tblDismountAtt').dataTable(
    {
        "bFilter": true,
        "bInfo": false,
        "bDestroy": true,
        "bwidth": '100%',
        //"sDom": '<"top"f>',
        'iDisplayLength':5000,
        "order": [[2, "asc"]],
         dom: "Cfrtip",
         scrollY: "140px",
         scrollX: "100%",
         paging: false,
         scrollCollapse: true,
         "fnInitComplete": function () 
         {
            this.fnAdjustColumnSizing(true);
         },
         "fnDrawCallback" : function(oSettings)
         {
            this.fnAdjustColumnSizing(false);
         },
        "aoColumnDefs" : [
                        {'bSortable' : false, 'aTargets' : [ 0 ] , "width": "80px"}, //Switch to Dismount
                        {'bSortable' : false, 'aTargets' : [ 1 ], "width": "80px"}, //Parts Status
                        {'bSortable' : true, 'aTargets' : [ 2 ], "width": "80px"}, //Sales Code
                        {'bSortable' : true, 'aTargets' : [ 3 ] , "width": "60px"}, //Price
                        {'bSortable' : false, 'aTargets' : [ 4 ], "width": "60px"}, //Currency
                        {'bSortable' : true, 'aTargets' : [ 5 ], "width": "150px"}, //Sales Code Description
                        {'bSortable' : false, 'aTargets' : [ 6 ], "width": "80px"}, //Quantity
                        {'bSortable' : false, 'aTargets' : [ 7 ], "width": "380px"}, //Remarks
                        {'bSortable' : true, 'aTargets' : [ 8 ], "width": "80px"}, //    PSO Ref No.
                        {'bSortable' : false, 'aTargets' : [ 9 ], "width": "150px"}, //Model Sub Name
                        {'bSortable' : false, 'aTargets' : [ 10 ] , "width": "80px"}, //Value
                        {'bSortable' : false, 'aTargets' : [ 11 ], "width": "150px"}, //Date
                        {'bSortable' : true, 'aTargets' : [ 12 ]},
                        {'bSortable' : true, 'aTargets' : [ 13 ]},
                        {'bSortable' : true, 'aTargets' : [ 14 ]}
                    ]

    });

注：

fnAdjustColumnSizing(true) => 调整所有 grids/datatables 可见或隐藏的列大小。
fnAdjustColumnSizing(false) => 仅调整 grids/datatables 可见的列大小。

Jquery 数据表修复了 IE 9 中的列问题

Jquery datatables fixed columns issue in IE 9

jquery

css

asp.net-mvc-4

internet-explorer-9

jquery-datatables