Search code examples
datatablestabletools

how to disable a DataTables/TableTools button


I'm using DataTable 1.10 and TableTools 2.2.1.

Given the following snipped I would like to disable/enable the edit-button.

var myTable = $("#myTable ").DataTable({
tableTools : {
    "aButtons" : [ {
        "sExtends" : "text",
        "sButtonText" : "Edit",
        "fnClick" : function(nButton, oConfig, oFlash) {
            /* some stuff */    
        }
    }]
  }
})

Is there a possibility to do this at runtime?

Thanks a lot


Solution

  • This was a good question! Seems that the fnClick in

    dataTable.tabletools().fnSettings().buttonSet[id].fnClick 
    

    only is a reference to the event stored elsewhere, not accessible (changing fnClick on the API has no effect). However, you can use the predefined class DTTT_disabled and check for that in your fnClick-handler :

    var dataTable = $("#example").DataTable({
       sDom: 'TC',
       oTableTools : {
           aButtons : [{
                sExtends : "text",
                sButtonText : "Edit",
                fnClick :  function(nButton, oConfig, oFlash) {
                     if ($(nButton).hasClass('DTTT_disabled')) return;
                     alert('edit button clicked');
                }
           }]  
      }
    });
    

    example with a checkbox enabling or disabling the button :

    $("#enable").click(function() {
        if ($(this).is(':checked')) {
            $('.DTTT_button_text').removeClass('DTTT_disabled');
        } else {
            $('.DTTT_button_text').addClass('DTTT_disabled');
        }
    });
    

    see demo -> http://jsfiddle.net/ev2N2/