Динамическое отключение кнопки в данных столбца таблицы данных

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

И использование события рисования DataTables для включения / отключения кнопок:

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