如何在其操作回调中禁用自定义 DataTables 按钮？

Posted 2023-04-13

【中文标题】如何在其操作回调中禁用自定义 DataTables 按钮？

【英文标题】：How to disable a custom DataTables button in its action callback?

【发布时间】：2021-03-12 19:17:46

【问题描述】：

这是在 C# ASP.NET MVC 5 Web 应用程序中，使用 DataTables 版本 1.10.22。

我将 DataTable 配置为具有自定义按钮。按钮的操作是一个回调函数。该函数执行一次后，我想禁用该按钮。

我可以禁用与 DataTable 关联的所有按钮。但是，如何只禁用一个按钮？

DataTables 文档（例如 https://datatables.net/reference/api/buttons().disable()）有一个示例，该示例似乎通过...它们的 CSS 类名称来识别某些按钮？

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

但是，如何唯一标识我的自定义按钮？

按钮的动作回调函数似乎提供了几个代表按钮的参数。但是，node 似乎没有disable() 功能。将 config.enabled 更改为 false 无效。我还能尝试什么？

以下是我在 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>

【参考方案1】：

可以为每个 DataTables 按钮指定按钮名称和/或类名称 - 然后您可以使用其中任何一个来引用该按钮 - 例如：

$(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();

);

在上面的例子中，按钮有一个按钮名和一个类名。

选择一个或多个按钮有多种其他方法：

buttons( selector );

这些selector 选项记录在here。

而且，是的，你问题中的那个例子......

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

...确实在使用类名选择器。

【讨论】：

谢谢@andrewjames，效果很好。