根据数据属性有条件地隐藏数据表列

Question

我有以下问题：

我想有条件地在数据表中显示一列。特别是 kt 数据表中的操作列。 （Laravel 的 Metronic 主题有它自己的基于 jQuery 数据表的 Datatables 实现。）我一直在研究 column.render 方法，但我不太明白。理想情况下，我想显示一个基于我传递的数据属性以及数据表的 html 的列。

HTML：

<div id="datatable-example" data-isadmin="{{ auth()->user()->hasRole(['superadmin', 'admin']) }}"></div>

js/jquery:

example_datatable = example_element.DataTable({
        search: {
            input: $('#generalSearch'),
        },
        rows: {
            ...
        },
        columns: [
            ...,
            {
                field: 'actions',
                title: sendings_element.data('column-actions'),
                class: 'w8',
                textAlign: 'right',
                sortable: false,
                template: function (row) {
                    if (sendings_element.data('user_roles')) {
                        return '<a class="btn btn-danger" href="' + sendings_element.data('route-edit-sending').replace('__id__', row.id) + '">' + sendings_element.data('text_edit') + '</a>';
                    } else {
                        return '<a class="btn btn-danger" href="' + sendings_element.data('route-view-sending').replace('__id__', row.id) + '">' + sendings_element.data('text_view') + '</a>';
                    }
                }
            },
        ],
    });

我真的很感谢您对此的帮助。

更新：

我找到了一个可行的解决方案：

<div id="datatable-id"
         ...
         data-isadmin="{{ auth()->user()->hasRole('super-admin') ? "true"  : "false" }}" 
    ></div>

在我的 javascript 中：

 kb_datatable = kb_element.customDataTableThatExtendsKTDatatable({      
        ...    
        columns: [          
           ...
            {
                field: 'description',
                title: kb_element.data('column-description'),
                width: 600,
                template: function(row) {
                    if(kb_element.data('isadmin')){                     
                        kb_datatable.column(1).visible(false);
                    }
                },
            },           
            ...

            },
        ],
    });

我对这个解决方案还不满意，因为我正在使用一行模板来隐藏列。但它现在有效。

@remul：是的，我正在使用 KT-Datatable，我不确定报告此问题的同事是否在他的代码中。接得好！我刚刚使用扩展 ktdatatable 的自定义数据表设置了一个测试用例。我已经接受了您的答案作为解决方案，因为您为我指明了正确的方向，但问题是可见属性需要 true 或 false，因此是 html 代码中的 shortif。理想情况下，我想要一个列的回调函数，但我能找到的唯一与它有点相似的是模板方法。此外，如果我在列对象的可见属性上使用 shortif 的结果，我会遇到一个奇怪的错误，我需要将其他列设置为 null 并且无法为其他列设置其他属性。建议使用具有目标和可见的 ColumnDefs 作为另一种解决方案，但我也无法使其工作。

Answer 1

将visible 属性添加到操作列应该可以解决问题，但是当使用stateSave 时，只要数据表存在已保存状态，更改数据属性就没有效果。为避免这种情况，您可以从状态中删除可见性，如提到的here：

如果您不想声明保存列的可见性，您可以删除 状态中对象的列数组中的可见参数 对象：

stateSaveParams: function ( settings, data ) {
  for ( var i=0, ien=data.columns.length ; i<ien ; i++ ) {
    delete data.columns[i].visible;
  }
}

所以在你的情况下：

columns: [
    {
        field: 'actions',
        visible: !!example_element.data('isadmin')
        // your other attributes
    },
],
stateSaveParams: function ( settings, data ) {
    for ( var i=0, ien=data.columns.length ; i<ien ; i++ ) {
        delete data.columns[i].visible;
    }
}