How to disable a custom DataTables button in its action callback?

Question

This is in a C# ASP.NET MVC 5 web application, using DataTables version 1.10.22.

I configure a DataTable to have a custom button. The action for the button is a callback function. After that function executes once, I want to disable the button.

I can disable all buttons associated with the DataTable. But, how do I disable just one button?

The DataTables documentation, such as https://datatables.net/reference/api/buttons().disable(), has an example that seems to identify certain buttons by... their CSS class name?

var table = $('#myTable').DataTable();
var buttons = table.buttons( ['.edit', '.delete'] );
buttons.disable();

But, how do I uniquely identify my custom button?

The action callback function for the button seems to be provided with several parameters that represent the button. But, the node does not seem to have a disable() function. Changing config.enabled to false has no effect. What else can I try?

The following is what I am trying to do in my Views/Foo/Index.cshtml:

<script>
  $( document ).ready( onReady );



  function onReady()
  {
    var config = {};

    config.buttons =
    [
      // A button to create data for the table.
      {
        text: '<span class="fa fa-plus"/>',
        titleAttr: 'Create states',
        action: createStates,
        enabled: true,
      }

      ... other buttons ...
    ];

    ... other configuration ...

    $( '#state-table' ).DataTable( config ) );
  }



  /**
   * Create the states.
   * 
   * Parameters:
   * e (object): The event.
   * table (object): The DataTable.
   * node (jQuery): The jQuery instance of the button that was clicked.
   * config (object): The button configuration.
   */
  function createStates( e, table, node, config )
  {
    //------------------------------
    // Create client-side state data in the table.
    table.clear();

    for ( var i = 0; i < 3; i++ )
    {
      var data = { Id: i, Name: 'state ' + i };
      table.row.add( data );
    }

    //------------------------------
    // Calling draw() at the end updates the DataTable internal caches.
    table.rows().draw();

    //------------------------------
    // Disable the button, so that states cannot be created again.
    // *** How ? ***

    // Just changing this property has no effect on the button.
    config.enabled = false;

    // This disables all buttons, not just the one I want.
    table.buttons().disable();
  }
</script>

andrewJames · Accepted Answer · 2020-11-30 21:47:24Z

3

Each DataTables button can be given a button name and/or a class name - and then you can refer to that button using either of these - for example:

$(document).ready(function() {

  var table = $('#myTable').DataTable( {
    dom: 'Bfrtip',
    "buttons": [
      {
        text: 'My Button',
        className: 'myButtonClass',
        name: 'myButtonName'
      }
    ]
  } );

  table.buttons( '.myButtonClass' ).disable();
  //table.buttons( 'myButtonName:name' ).disable();

});

In the above example, the button has both a button name and a class name.

There are various additional ways to select one or more buttons:

buttons( selector );

These selector options are documented here.

And, yes, that example in your question...

var buttons = table.buttons( ['.edit', '.delete'] );

...is indeed using the class name selector.

answered Nov 30, 2020 at 21:47

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Finch Over a year ago

Thanks @andrewjames, that works perfectly.

Collectives™ on Stack Overflow

How to disable a custom DataTables button in its action callback?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related