After sorting a table my Edit button becomes active despite event handler disabling it

tim-hitchins-ekkosense

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!

kthorngren

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 the select and draw events, like this:
https://live.datatables.net/guwafemu/377/edit

Kevin

tim-hitchins-ekkosense

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.

kthorngren

Maybe add the selector-modifier of {search: "applied"} to your rows().every() loop. You might need to start with setting editable false.

Kevin