After sorting a table my Edit button becomes active despite event handler disabling it
After sorting a table my Edit button becomes active despite event handler disabling it
tim-hitchins-ekkosense
Posts: 5Questions: 2Answers: 0
I have set up my table so that on select it checks if the row(s) selected have edit permissions, and hides the edit button accordingly.
const enableButtons = function () {
let editable = true;
// all selected rows must have edit permission
table.rows({selected: true}).every(function (rowIdx, tableLoop, rowLoop) {
const entityId = this.data().id;
editable = editable && loadData.permissions.edit[entityId];
});
table.buttons('.buttons-edit').enable(editable);
}
table.on('select', enableButtons);
This works great. However, when I sort the table, my Edit button becomes active again.
I tried adding another event handler for 'order':
table.on('order', enableButtons);
but it still enables it after the table is ordered - I assume because after the order event it checks if any row is selected, and enables the button.
I can override this with the draw event, but it feels like the order event should fire after all the sorting operations have been completed (including the button enabling), rather than it overriding what I'm doing.
Thanks!
This question has an accepted answers - jump to answer
Answers
After ordering and searching the
draw()API is used to redraw the table. Looks like you will have the same issue when searching. It appears there is an interaction in the draw process that re-enables the button. Looks like you will need to call enableButtons in both theselectanddrawevents, like this:https://live.datatables.net/guwafemu/377/edit
Kevin
Ahh I see, it's draw that does the enabling. Makes sense - might be good to have it documented somewhere.
And I'd not actually noticed the search. Slightly tricky one to deal with there because I gather the row is still selected, even though it's not displayed
... Perhaps I just have to deselect the moment a search occurs - it's quite unintuitive for you to search, and click the still-active Edit and it edit a non-visible row.
Maybe add the
selector-modifierof{search: "applied"}to yourrows().every()loop. You might need to start with setting editable false.Kevin