Disable button dynamically in Datatable table column data

Question

I am trying to disable the button present in the last column of Data table. Using the code below works only for the products displayed in the first pagination. If we alter the table length then for the rest of the products, button is enabled.

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

If table length is set to 10 by default then this CSS is applied to only the 10 rows

When table length is adjusted to the 25 then the button isn't disabled

Louys Patrice Bessette · Accepted Answer · 2018-12-13 14:31:53Z

1

DataTable is creating new elements at each draw(). The elements are created from a data object it defined on inititalisation.

So to disable some buttons using its class selector will work only until the next draw, because the data object was not updated. A new set for fresh elements will be created when the user changes the page length... Or filters a column... Etc.

A solution would be to update that data object. It is quite easy to do for a single row. But for the whole table... I would suggest something else.

First, if you do not already, use a variable to store the DataTables instance:

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

Then, use a global scope variable for the store open/closed state:

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

And use the DataTables draw event to enable/disable the buttons:

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

In the Ajax request, just update the variable:

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

edited Dec 13, 2018 at 14:31

answered Dec 13, 2018 at 13:32

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Himani Over a year ago

Thanks a ton, solution you provided works like a charm :)

Himani Over a year ago

Only for he initial table draw, I need to apply the css in ajax funtion too. Edited your code

Collectives™ on Stack Overflow

Disable button dynamically in Datatable table column data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related