尝试禁用数据表中所有页面中的按钮

Question

我正在使用 Datatables JQuery 插件来在表格上显示数据。 在其中一列中，我还添加了一个按钮来编辑行。 我想要做的是当我单击其中一个按钮时，停用所有其他按钮。

这是我当前的代码和屏幕截图：

$(document.body).on("click", "._edit_save_btn",function(e){
   var id = this.id; // get id of selected btn
  // disable all other buttons but selected
  $("._edit_save_btn").not("#"+id).prop('disabled', true);

)};

虽然这对于数据的第一页（分页演示）工作正常，但当我更改页面时，似乎没有应用属性 disabled 。 因此，我可以单击任何其他按钮来添加禁用的属性。

我认为通过使用点击事件会起作用。我在这里错过了什么？

编辑

该表是使用 DataTables jquery 插件和 jquery 功能自动创建的。 在页面加载时，我的 html 结构如下所示：

<table id="example">
  <thead id="table_head">
  </thead>
</table>

然后表中填充了来自 Django 的数据。按钮元素如下所示：

edit_btn = '<button id="' + row_id + '" class="btn btn-info btn-sm _edit_save_btn" style="background-color:#a7a3a3;border-color:#a7a3a3">Edit</button>'

EDIT_2

此屏幕截图更好地解释了我对分页和更改页面的含义。请检查右下角以查看分页。当我转到另一个页面（例如从 1 到 2）时，我看到 disabled 属性未应用于该页面上的按钮：

编辑

在@Sherin Jose 的帮助下，我已经达到了这一点：

var disable_buttons = function(class_exists){
  if (class_exists){
    alert("dfdf")
    $("._edit_save_btn").not(this).prop('disabled', true);
  }
};


  $("#example").dataTable({
    "scrollX": true,
    "aaData":whole_array
  }).on( 'page.dt', function () {
    class_exists = $("button").hasClass("clicked");
    //alert(class_exists)
    disable_buttons(class_exists)
  });

每当用户单击一个按钮时，该按钮都会获得一个名为 clicked 的类。 然后在 disable_buttons 函数中，我检查这个类是否存在（“点击”类）。如果存在，我想禁用页面更改事件中的其他按钮。

我现在面临的问题是

 on( 'page.dt', function () {

在加载数据表之前执行！

Answer 1

试试这个，

//define the disable feature as a function
var disable_buttons = function(){
    $("._edit_save_btn").unbind("click").click(function(e){
        // disable all other buttons but selected
        $("._edit_save_btn").not(this).prop('disabled', true);  
    });
};


//call the above function on dataTable init and page change events like:
$("#example").dataTable({
    "scrollX": true,
    "aaData":whole_array,
    "fnDrawCallback":function () {
        disable_buttons();
    }
});