Datatable ColVis show/hide 错放数据

Datatable ColVis show/hide misplaces data

我的数据table colvis 插件遇到了一个非常罕见的问题。当我从 datatable 的 show/hide 按钮隐藏然后显示 datatable 列时,table body 中的数据放错了地方。

示例:

table正常情况下是这样的。其中 head 是网格的 header,data 是网格中的相应数据。

| head1 | head2 | head3 | head4 |

| data1 | data2 | data3 | data4 |

| data1 | data2 | data3 | data4 |

| data1 | data2 | data3 | data4 |

现在我使用 colviz

的 show/hide 按钮隐藏 head1
| head2 | head3 | head4 |

| data2 | data3 | data4 |

| data2 | data3 | data4 |

| data2 | data3 | data4 |

Ok 运行良好,现在我再次显示 colvis

head1 列表单 show/hide 按钮
| head1 | head2 | head3 | head4 |

| data2 | data3 | data4 | data1 |

| data2 | data3 | data4 | data1 |

| data2 | data3 | data4 | data1 |

head1位置正确,但数据错位到右端,其他列数据依次错位到左端。 我在很多地方使用过 colvis 并完成了类似的工作,一切都运行良好。但问题出在这个特定的问题上。

我有什么额外的东西。

  1. 我还添加了行分组,我删除了它并检查没有发生任何事情,似乎没有造成问题。
  2. 我有多个 header 行,我已将其完全删除并且似乎也不是问题所在。

这些是我的 data-table 设置。

//Settings for datatables
            var extensions = {
                "sFilter": "dataTables_filter",
                "sLength": "dataTables_length"
            }
                        // Used when bJQueryUI is false
                        $.extend($.fn.dataTableExt.oStdClasses, extensions);
                        // Used when bJQueryUI is true
                        $.extend($.fn.dataTableExt.oJUIClasses, extensions);
            odata = $('#grid').dataTable({
                "sDom":'C<"clear">Rlfrtip',
                "iDisplayLength": 50,
                //"scrollX": true,
                "aLengthMenu": [
                    [ 50, 100,150, -1],
                    [ 50, 100,150, "All"]
                ],
                "sPaginationType": "full_numbers",
                "oLanguage": {
                 "sSearch": " ",
                 "sZeroRecords":"No Records found, try changing the date range",
                 "oPaginate": {
                   "sLast": ">>",
                   "sFirst":"<<",
                   "sNext" : ">",
                   "sPrevious" : "<"
                 }
                },
                "oColVis": {
                    "buttonText": "Header",
                    "aiExclude": [0,1],
                    groups: [
                        {
                            title: "All",
                            columns: [3,4,5,6,7,8,9,10,11,12,13]
                        }]
                },
                "aoColumnDefs": [
                 { "bSortable": false, "aTargets":[0,1] },
                 { "bVisible" : false, "aTargets":[0,1,2] }
                ] 
            });

补充说明:我有24列在网格中工作,拉入的数据量平均为2000-10000+

在点击和试用的过程中,我发现使用以下方法解决了这个问题:

new $.fn.dataTable.FixedColumns( odata );

这行代码应该写在datatable初始化之后

对于仍然感兴趣的任何人,我遇到了完全相同的问题,这似乎是由 "visible"(或匈牙利表示法中的 "bVisible")参数作为整数(1 或 0)发送引起的。当我在后端将其转换为布尔值时,问题就消失了。希望对您有所帮助。