hiding/showing actions column according to permission

abdirahimali

Hey all

for the last days I have a problem about using datatable, I need to hide/show action columns base on permissions
if action column is null I want to hide action column, if action has data i want to show that data passes on backend side.
// my backend code php
$data = $this->userModal->userslist();
foreach($data as $d){
if(ChechPermission($this->session->userdata('permissions'), "users", "edit")) {
$d->actions ='
<a href="Users/edit/'.$d->userid.'" class="btn btn-success btn-md"><i class="fas fa-pen-square"></i></a>
';
} else {
$d->actions = '';
}

        }
        echo json_encode($data);  

// end backend code php

// my datatable

$(document).ready(function(){

    $("#userTable").dataTable({

        pageLength: 25,
        lengthMenu: [25, 50, 75, 100],
         "dom": '<"top"lfB>rt<"bottom"p><"clear">',

        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ],



        'ajax' : {'url' : 'Users/getusers' , dataSrc : ""},

        columns : [


            {data : 'firstname'},
            {data : 'middlename'},
            {data : 'lastname'},
            {data : 'username'},
            {data : 'mobileno'},
            {data : 'statusname'},
            {data : 'groupname'},
            {data : 'actions'}


        ]
    });
});

kthorngren

Are you saying that all rows in the action column will either have buttons or will be empty?

If so, in initComplete you can get the returned JSON object (second parameter) and interrogate that to see if the action column is empty. You can check just the first row element assuming all are empty. Then use column().visible() to hide the column, for example:

this.api().column( 7 ).visible( false );

Kevin

abdirahimali

@kthorngren could you make more details because I added that and nothing happens

kthorngren

I added that and nothing happens

What exactly did you try?

Kevin

abdirahimali

my new datatable code is

$(document).ready(function(){ 
    $("#userTable").dataTable({ 
        pageLength: 25,
        lengthMenu: [25, 50, 75, 100],
         "dom": '<"top"lfB>rt<"bottom"p><"clear">',
 
        buttons: [
            'copy', 'excel', 'pdf', 'print'
        ],  
        'ajax' : {'url' : 'Users/getusers' , dataSrc : ""}, 
        columns : [
                {data : 'firstname'},
                {data : 'middlename'},
                {data : 'lastname'},
                {data : 'username'},
                {data : 'mobileno'},
                {data : 'statusname'},
                {data : 'groupname'},
                {data : 'actions'}
            ],
          "initComplete": function( settings, json ) {
        this.api().column( 7 ).visible( false );
       }
    });
});

kthorngren

That doesn't hide the actions column? Strange.

Here is a simple demo with two data sources; one with buttons in the action column and one without. Since there is not an ajax option there won't be a json value to use in initComplete. It uses the data variable sent to the function based on the button clicked.
http://live.datatables.net/quwohemi/1/edit

Kevin

abdirahimali

@kthorngren

$(document).ready(function(){
  function initDT(data) {
    var table = $('#userTable').DataTable({
      data: data,
      destroy: true,
 
        'ajax' : {'url' : 'Users/getusers' , dataSrc : ""},
 
        columns : [
                {data : 'firstname'},
                {data : 'middlename'},
                {data : 'lastname'},
                {data : 'username'},
                {data : 'mobileno'},
                {data : 'statusname'},
                {data : 'groupname'},
                {data : 'actions'}
            ],

      initComplete: function (settings, json) {
        // Use `json` instead of `data`
        if ( data[0].actions == '' ||  data[0].actions == null ) {
          this.api().column(7).visible( false );
        }
      }
    });
  
}
});

still same although I did with ajax and without ajax

thanks in advance you work hard with me

kthorngren

Remove the data: data. You can't have two data sources. Use the json parameter of the initComplete function. Use the browser's debugger or console.log to output the json variable so you can see the structure and the response data. Maybe something like this since you have dataSrc : "":

if ( json[0].actions == '' ||  json[0].actions == null ) {

Kevin

kthorngren

Also you don't need destroy: true,. That was needed for the demo to work.

Kevin