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

Question

我有以下问题：

我想有条件地显示数据表中的列。特别是 kt-datatable 中的操作列。（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 代码中的缩写。理想情况下，我希望该列有一个回调函数，但我唯一能找到的是模板方法。此外，如果我在列对象 i 运行中的可见属性上使用 shortif 的结果会导致一个奇怪的错误，我需要将其他列设置为 null 并且无法为其他列设置其他属性列。将 ColumnDefs 与 target 和 visible 一起使用是另一种解决方案，但我也无法做到这一点。

Answer 1

将 visible 属性添加到 actions 列应该可以解决问题，但是当使用 stateSave 时，只要数据表存在已保存状态，更改数据属性就不会产生任何影响。为避免这种情况，您可以删除状态保存的可见性，如前所述 here:

If you want to not state save column visibility you could remove the visible parameter from the columns array of objects in the state object:

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;
    }
}

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

Conditionally hide datatable column based on data-attribute

datatables

laravel

metronic