Trying to disable button in all pages in Datatables

Question

I am using Datatables JQuery plugin in order to show data on a table. In one of the columns I have added also a button to edit the rows. What I am trying to do is when I click one of the buttons, to deactivate all the others.

Here is my current code together with a screenshot:

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

)};

Although this works fine for the first page of data (paginated presentation), when I change page, it seems like that the property disabled is not applied. Thus I can click any other button in order to add the property disabled.

I thought by using the on click event things would work. What am I missing here?

EDIT

The table is created automatically using DataTables jquery plugin and jquery functionality. On page load my html structure looks like this:

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

Then the table is populated with data coming from Django. The button element looks like this:

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

This screenshot explains better what I mean with pagination and changing pages. Please check the lower right corner to see the pagination. When I go to another page (e.g. from 1 to 2) then I see that the disabled property wasnot applied for the buttons on that page:

EDIT

With the help of @Sherin Jose I have managed to reach to this point:

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

Whenever a user clicks a button, then the button gets a class called clicked. Then in the disable_buttons function, I check if this class exists (the 'clicked' class). If it exists I want to disable the other buttons on page change event.

The issue I am facing now is that the

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

is executed before the datatable is loaded!

Sherin Jose · Accepted Answer · 2016-07-15 10:25:50Z

1

Try this one,

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

edited Jul 15, 2016 at 10:25

answered Jul 15, 2016 at 9:22

Sherin Jose

2,5263 gold badges20 silver badges39 bronze badges

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

8 Comments

user1919 Over a year ago

Thanks. I am not sure where I should add the second part. This is how I initialize my datatable: $("#example").dataTable({ "scrollX": true, "aaData":whole_array });

user1919 Over a year ago

I think we are missing something. It seems like the disable_buttons function is never called. I tried to alert something inside it but never gets executed.

user1919 Over a year ago

I think this line is messing things up: $("._edit_save_btn").unbind("click").click(function(e){

Sherin Jose Over a year ago

I have edited it again with drawCallback. try it now

user1919 Over a year ago

Ok. So now it works as at the very beginning. I think your approach using an event ('page.dt') is the way to go.

|

Collectives™ on Stack Overflow

Trying to disable button in all pages in Datatables

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related