Datatable ColVis show/hide 错放数据

Question

我的数据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 并完成了类似的工作，一切都运行良好。但问题出在这个特定的问题上。

我有什么额外的东西。

我还添加了行分组，我删除了它并检查没有发生任何事情，似乎没有造成问题。
我有多个 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+

Answer 1

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

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

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

Answer 2

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

Datatable ColVis show/hide 错放数据

Datatable ColVis show/hide misplaces data

jquery

jquery-datatables