Disable or Hide Buttons if User Does Not Have Access

RAWaddell

I've added two buttons to my DT to export to CSV or PDF, but I only want them enabled if the user is an Admin (set as part of the PHP login and stored in $_SESSION['wf_user']['isAdmin']). I saw a similar question (https://datatables.net/forums/discussion/22187/how-to-hide-a-button) but I can't work out how to implement it exactly. My DT definition (as least as far as the buttons go):

    $('#show-entries').DataTable( {
        
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'csvHtml5', text: 'Export to CSV',
                exportOptions: {
                    columns: [ 1, 2, 5, 6, 3, 4, 14, 15, 8, 16, 
                                17, 18, 9, 19, 10, 11, 20, 12, 21, 22 ]
                }
            },
            {
                extend: 'pdfHtml5', 
                text: 'PDF',
                header: true,
                footer: true,
                title: "WF Online Contest Entries",
                download: 'open',
                orientation: 'landscape',
                pagesize: 'LETTER',
                filename: function(){
                    var d = new Date();
                    var n = d.getTime();
                    return 'WF Online Contest Entries - ' + n;
                },
                extension: '.pdf',
                customize : function(doc) {doc.pageMargins = [10, 10, 10,10 ]; },
                exportOptions: {
                    columns: [ 1, 2, 5, 7, 8, 9, 10, 11, 12 ]
                }
            }
        ],
...

Where/how do I add a function like this to only draw it if isAdmin?

buttons = [ ... ];
 
if ( userHasCreateAccess ) {
  buttons.unshift( { ... create button } );
}

RAWaddell

This seems to work (isAdmin is a JS global variable; I'm planning to switch it to a hidden input and reference it by ID instead):

    tblDT = $('#show-entries').DataTable();

    console.log ('isAdmin: ' + isAdmin);

    if(isAdmin === "1"){
        tblDT.button( 0 ).enable( true );
        tblDT.button( 1 ).enable( true );
        console.log('Button 0 should be ENABLED');
    }else {
        tblDT.button( 0 ).enable( false );
        tblDT.button( 1 ).enable( false );
        console.log('Button 0 should be DISABLED')
    }

allan

Perfect. Thanks for posting back.

Allan

RAWaddell

You're most welcome, Allan. DataTables has greatly improved both my user interface and my code maintainability, and the help I've received here has been fantastic. I'm very grateful.

chaz

In case anyone is looking to hide a button this worked for me.

In CSS file add: (if you are using bootstrap this class may be defined already)

.hidden {
   display: none !important;
 }


    var myClass = "";
    if (isAdmin != "1"){
        myClass = 'hidden'
    };

$('#show-entries').DataTable( {
.....
extend: 'pdfHtml5',
text: 'PDF',
className: myClass, ....