Question

我正在使用数据表，我尝试隐藏第6列，但它无效。奇怪的是，它适用于第一和第七列。

这是我的代码： HTML ID 域子域名技术证明名称评分技能ID 的Jscript

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列设置为可见false并且它们没有显示但是第6列是可见的，它是真的正在展示。

我还试图确保：

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

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

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

Answer 1

在设置列的可见性时，我遇到了非常相似的问题。在对数据表的整个初始化过程进行调试之后，我意识到最后一步是加载表的已保存状态。因此，我将stateSave设置为false，这很有效！

我的问题是由于更改时间而引起的。我已经查看了表中的所有列，然后再添加逻辑以使某些列在初始化时不可见。这样，我相信在浏览器cookie中设置的表状态将这些列显式设置为可见。

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

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

Answer 2

这就是我的方式，它对我有用......技巧在columnDefs中。

你也可以参考这个url ..它有实例

$(function () {
$("#demoGrid").DataTable({
    "processing": true, // for show progress bar
    "serverSide": false, // for process server side
    "filter": true, // this is for disable filter (search box)
    "orderMulti": false, // for disable multiple column at once
    "Paging": true,
    "PageLength": 20,
    "iDisplayLength": 20,
    "pagingType": "full_numbers",
    "ajax": {
        "url": "/controller/method",
        "type": "GET",
        "datatype": 'json',
        "data": 'data'
    },
    "autoWidth": false,
    "columnDefs":
           [
               {
                   "targets": [0],
                   "visible": false,
                   "searchable": false,
                   "width": "10px"
               },
               {
                   "targets": [1],
                   "visible": true,
                   "searchable": true,
                   "width": "10px"
               },
               {
                   "targets": [2],
                   "searchable": true,
                   "orderable": true,
                   "width": "40px"
               },
      ... other columns
                  {
                      "targets": [8],
                      "searchable": true,
                      "orderable": true,
                      "width": "40px",
                      "className": 'select-checkbox'
                  }

           ],
    "columns": [
                  { "data": "RowId", "name": "RowId", "autoWidth": true, "Visible": false },
                  { "data": "Domain", "name": "Domain", "autoWidth": true },... rest of code

数据表使用可见假不工作

2 个答案: