动态禁用Datatable表列数据中的按钮

Question

我正在尝试禁用数据表最后一列中的按钮。使用以下代码仅适用于第一次分页中显示的产品。如果我们更改表格长度，那么对于其余产品，将启用按钮。

$.ajax({
    url: custom.ajaxurl,
    type: "GET",
    data: { action: 'checkStoreStatus', store_id: store_id },
    success: function(returned)
    {
    var object = JSON.parse(returned);
    if(object['status'] == 'close'){
        $('.single_add_to_cart_button').prop('disabled', true);

    } else {
        $('.single_add_to_cart_button').prop('disabled', false);
    }
    },
    error: function(exception) {
        console.log("ex:"+exception);
    }
    });

如果表格长度默认设置为10，则此CSS仅应用于10行

当表格长度调整为25时，按钮不会被禁用

Answer 1

DataTable正在每个draw()处创建新元素。元素是根据初始化时定义的数据对象创建的。

因此，使用其类选择器禁用某些按钮仅在下一次绘制之前有效，因为数据对象尚未更新。当用户更改页面长度...或过滤列...等时，将为新元素创建新的集合。

解决方案是更新该数据对象。单行很容易做到。但是对于整个桌子……我会建议别的东西。

首先，如果尚未使用，请使用变量来存储DataTables实例：

var table = $('#example').DataTable();

然后，将全局作用域变量用于商店的打开/关闭状态：

var storeClosed = false; // Default state, buttons enabled

并使用数据表draw event启用/禁用按钮：

table.on('draw', function(){
  $('.single_add_to_cart_button').prop('disabled', storeClosed);
});

在Ajax请求中，只需更新变量：

$.ajax({
  url: custom.ajaxurl,
  type: "GET",
  data: { action: 'checkStoreStatus', store_id: store_id },
  success: function(returned){
    var object = JSON.parse(returned);
    if(object['status'] == 'close'){
      storeClosed = true;

    }else{
      storeClosed = false;
    }
    // Apply the change
    $('.single_add_to_cart_button').prop('disabled', storeClosed);
  },
  error: function(exception){
    console.log("ex:"+exception);
  }
});