数据表使用可见错误不起作用

Question

我正在使用数据表，并尝试隐藏我的第 6 列，但它不起作用。奇怪的是，它适用于第一列和第 7 列。

这是我的代码:
HTML



ID
领域
子域
技术
认证
姓名
评分
技能ID


















脚本

var certificationTable;
certificationTable = $('#certificationTable').DataTable({
                serverSide: true,
                processing: true,
                stateSave: true,
                ajax: {
                        url: "{!! route('listOfUsersSkills',['1']) !!}",
                        type: "POST",
                        dataType: "JSON"
                    },
                columns: [
                    { name: 'skill_user.id', data: 'id', searchable: false , visible: false },
                    { name: 'skills.domain', data: 'domain', searchable: true , visible: true },
                    { name: 'skills.subdomain', data: 'subdomain', searchable: true , visible: true },
                    { name: 'skills.technology', data: 'technology', searchable: true , visible: true },
                    { name: 'skills.skill', data: 'skill', searchable: true , visible: true },
                    { name: 'users.name', data: 'name', searchable: true , visible: true },
                    { name: 'skill_user.rating', data: 'rating', searchable: false , visible: false },
                    { name: 'skills.id', data: 'skill_id', searchable: false , visible: false },
                    {
                        name: 'actions',
                        data: null,
                        sortable: false,
                        searchable: false,
                        render: function (data) {
                            ...
                        },
                        width: '70px'
                    }
                    ],
                order: [[5, 'asc'],[1, 'asc'],[2, 'asc'],[3, 'asc'],[4, 'asc']],
                lengthMenu: [
                    [ 10, 25, 50, -1 ],
                    [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                ],
                dom: 'Bfrtip',
                buttons: [
                    {
                    extend: "colvis",
                    className: "btn-sm",
                    columns: [ 1,2,3,4,5,6,7 ]
                    },

                  {
                    extend: "pageLength",
                    className: "btn-sm"
                  },
                  {
                    extend: "csv",
                    className: "btn-sm",
                    exportOptions: {
                        columns: ':visible'
                    }
                  },
                  {
                    extend: "excel",
                    className: "btn-sm",
                    exportOptions: {
                        columns: ':visible'
                    }
                  },
                  {
                    extend: "print",
                    className: "btn-sm",
                    exportOptions: {
                        columns: ':visible'
                    }
                  },
                ],
                initComplete: function () {
                    var columns = this.api().init().columns;
                    this.api().columns().every(function () {
                        var column = this;
                        // this will get us the index of the column
                        index = column[0][0];
                        //console.log(columns[index].searchable);

                        // Now we need to skip the column if it is not searchable and we return true, meaning we go to next iteration
                        if (columns[index].searchable == false) {
                          return true;
                        }
                        else {
                          var input = document.createElement("input");
                          $(input).appendTo($(column.footer()).empty())
                          .on('keyup change', function () {
                              column.search($(this).val(), false, false, true).draw();
                          });
                        }
                    });
                    // Restore state
                    var state = certificationTable.state.loaded();
                    if (state) {
                        certificationTable.columns().eq(0).each(function (colIdx) {
                            var colSearch = state.columns[colIdx].search;

                            if (colSearch.search) {
                                $('input', certificationTable.column(colIdx).footer()).val(colSearch.search);
                            }
                        });

                        certificationTable.draw();
                    }
                }
            });

所以问题是，该表很好地记录了记录，并且一切正常，除了如您所见，第 0 列和第 7 列设置为可见假并且它们没有显示，但第 6 列是可见的真并且正在显示。

我还试图确保:

alert( 'Column is '+(certificationTable.column( 6 ).visible() === true ? 'visible' : 'not visible'));

对于第 0 列和第 7 列，它在警报中声明不可见，但是当我对第 6 列执行此操作时，它声明可见。就好像第 6 列上的可见语句没有设置它......

奇怪的是，我试图将第 7 列更改为可见，但它没有显示，即使我更改了警报，它也显示不可见。就好像，它将第一次设置的列的可见状态保存在内存中。

Answer 1

我在设置列可见性时遇到了非常相似的问题。在datatables中调试了整个init过程后，我意识到最后一步是加载表的保存状态。所以，我将 stateSave 设置为 false，瞧，它奏效了!

我的问题是由我的更改时间造成的。在后来添加逻辑以使某些列在 init 上不可见之前，我已经查看了表中的所有列。因此，我认为是在浏览器 cookie 中设置的表状态将这些列明确设置为可见。

还有一种方法可以通过 stateSaveParams 回调详细覆盖 stateSave 功能here .

不确定它是否重要，但我使用的是 1.10.18 版的数据表。