Question

如果用户不是ADMIN，我必须隐藏datatable的某些列。在HTML中我有这个代码

<table id="fleetsTable"
    class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Application</th>
            <th>Cubic</th>
            <th>Power</th>
            <th>Euro class</th>
            <th>Engine Type</th>
            <th>Traction</th>
            <th>Transmission</th>
            <th>Cars</th>
            <th sec:authorize="hasRole('ROLE_ADMIN')">Delete</th>
        </tr>
    </thead>
</table>

该表通过javascript填充ajax值。我有这段代码：

if ( ! $.fn.DataTable.isDataTable( '#fleetsTable' ) ) {
    fleetTable = $('#fleetsTable').DataTable({
        responsive: true,
        //disable order and search on column
        columnDefs: [
             {
                 targets: [7, 8],
                 orderable: false,
                 searchable: false,
             }
         ],
         //fix problem with responsive table
         "autoWidth": false,
         "ajax": "fleet/table",
         "columns": [
             { "data": "application" },
             { "data": "cubic" },
             { "data": "power" },
             { "data": "euroClass" },
             { "data": "engineType" },
             { "data": "traction" },
             { "data": "transmission" },

             { 
                 data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-primary" id="showCarsButton">Show cars</button>'; 
                 }

             },
             {data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-danger" id="deleteFleet" data-toggle="modal"'
                 +'data-target="#deleteFleetModal">Delete</button>' 
             }
             }
        ],
    });
}
else {
    fleetTable.ajax.url("table").load();
}

要检查用户是否具有正确的角色，我在HTML和

中使用隐藏的输入

document.getElementById("role").value=="[ROLE_ADMIN]"

在javascript中。但是如何避免构建删除按钮？ html代码只隐藏列的名称。感谢

更新：现在我隐藏了列

if (!(document.getElementById("role").value=="[ROLE_ADMIN]")){
        // Get the column API object
        var column = fleetTable.column(8);
        // Toggle the visibility
        column.visible( false);
}

但我更喜欢不创建列

Answer 1

很简单。您可以使用columnDef的{{1}}属性：

visible

...假设它是＃8列，我们想要跳过 - 如果columnDefs : [ { targets: 8, visible: document.getElementById('role').value == '[ROLE_ADMIN]' } ]与#role不同，则列永远不会创建。

Answer 2

您可以将列数组保留为局部变量。首先按下所需的列，然后根据条件推送删除列。然后将此数组分配给columns.Like

var cols= [
             { "data": "application" },
             { "data": "cubic" },
             { "data": "power" },
             { "data": "euroClass" },
             { "data": "engineType" },
             { "data": "traction" },
             { "data": "transmission" },

             { 
                 data:null, render: function ( data, type, row ) {
                 return '<button type="button" class="btn btn-primary" id="showCarsButton">Show cars</button>'; 
                 }

             },
          ];
     if (!(document.getElementById("role").value=="[ROLE_ADMIN]")){
          cols.push( {data:null, render: function ( data, type, row ) {
             return '<button type="button" class="btn btn-danger" id="deleteFleet" data-toggle="modal"'
             +'data-target="#deleteFleetModal">Delete</button>' 
         }
        };

然后像

一样初始化表格

 "columns": cols

Answer 3

尽管，我参加聚会很晚，但是我也想分享我的解决方案。

在Javascript中（与Laravel一起使用）

var role = "{{ Auth::user()->role_id }} ";

$(function(){
    var showAdminColumns =  role ==3 ? true:false;

    $('#datatable').DataTable({
        serverSide:true,
        processing:true,
        pageLength:25,
        ajax:urlMasterData,
        columns:[

            { data:'edit' , name: 'edit' ,visible : showAdminColumns},
            { data:'cancel' , name: 'cancel' ,visible : showAdminColumns},

        ],

    })
})

希望有帮助

Answer 4

这对我来说只是检查$ permission的条件为真还是假。

使用Laravel在Javascript中

var permission = "{{$permission}}";
$(function() {
var showhideColumns =  permission;
  console.log(showhideColumns);
    $('#tbl-order-items').DataTable({
    processing: true,
    serverSide: true,
    pageLength: 50,
    ajax: "{{ url('/supplier_order/processing_data_order_item_history', 
       ['supplier_order_id'=>$supplier_order_id]) }}",
        columns: [
                  { data: 'image', name: 'image' },
                  { data: 'sku', name: 'sku' },
                  { data: 'product_name', name: 'product_name' },
                  { data: 'status', name: 'status' },
                  { data: 'option', name: 'option' },
                  { data: 'qty', name: 'qty' },
                  { data: 'price', name: 'price' },
                  { data: 'supplier_price', name: 'supplier_price' },
                  { data: 'supplier_actual_price_yuan', name: 
                  'supplier_actual_price_yuan' },
                  { data: 'supplier_actual_price_usd', name: 
                  'supplier_actual_price_usd', visible : showhideColumns  },
                  { data: 'arrived_date', name: 'arrived_date'},
                  { data: 'actions', name: 'actions'}
              ],
              "language": {processing: '<i class="fa fa-spinner fa-spin fa-2x 
              fa-fw" style="color:blue"></i><span class="sr-only">Data is 
               Loading...</span> '},

            });

          });

如果用户在Spring安全性中没有rigth角色，则数据表会隐藏列

4 个答案: