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

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

)};

尽管这对于数据的第一页(分页演示)效果很好，但当我更改页面时，似乎未应用禁用的属性。因此，我可以单击任何其他按钮来添加禁用的属性。

我认为通过使用点击事件就可以了。我在这里缺少什么？

编辑

该表是使用 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)时，我发现禁用属性未应用于该页面上的按钮:

编辑

在@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函数中，我检查这个类是否存在(“clicked”类)。如果存在，我想禁用页面更改事件上的其他按钮。

我现在面临的问题是

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