Select table row after reinitialization

DawidGrzejek

Hello,

I've a problem. On picture you can see how my page looks. On the left you select a user single-select on the right tables are filled with data from that user with destroy: true. The problem is that whenever I switch to another user events .on( 'select', function ( e, dt, type, indexes ) and .on( 'deselect', function ( e, dt, type, indexes ) are fired extra time.

So if I select one user, then another then next one I will have three select and three deselect events fired. But If I retrive rows that are selected only one row have any data in it, other ones are empty. I thought destroy() will delete table and events bind to it, but I guess I'm doing something wrong.

Here is my code: http://live.datatables.net/pobecava/1/edit Tables are not populated, because I'm doing it with ajax and I dont know how can I do it here.

Any Idea what am I doing wrong?

DawidGrzejek

I found a article here: https://datatables.net/forums/discussion/48222/click-function-gets-called-multiple-times

that states

When Datatables is destroyed it will remove the events it has created but it doesn't remove the tbody nor any tbody events it hasn't created.

But actually I cannot use .off() while using .on('select',function()}

kthorngren

I thought destroy() will delete table and events bind to it, but I guess I'm doing something wrong.

I believe there is a difference to what destroy removes versus destroy().

From the destroy() docs:

This method can be used to remove those enhancements and return the table to its original un-enhanced state, with the data shown in the table.

From the destroy docs:

but if there is an existing DataTable which matches the selector, it will be destroyed and replaced with the new table.

The docs don't mention removing the enhancements, ie, events.

It doesn't look like you are changing the table configuration but only replacing the data. Is this correct? If so then it would be more efficient to use clear() followed by rows.add(). Use the DataTable.isDataTable() to determine if the table has been initialized or not and take appropriate action. Something like this:
http://live.datatables.net/kozogoko/1/edit

Or you can use the DataTable.isDataTable() to determine whether the select and deselect events should be created.

Tables are not populated, because I'm doing it with ajax and I dont know how can I do it here.

You can find an appropriate template here to use canned Ajax data. Its usually best to reduce the test case down to the code needed to show the issue. Similar to my example.

Kevin

DawidGrzejek

Here is live example of my problem: http://live.datatables.net/kozogoko/2/edit.

Select user on left, then user on right, switch user on left, repeat. In console you'll see that events are fireing multiply times.

allan

Easiest way to handle this is just to remove any existing events before adding your new event handler:

userAccountsTable
  .off( 'select' )
  .on( 'select', function ( e, dt, type, indexes ) {

http://live.datatables.net/kozogoko/3/edit

Using a namespace would be a good idea to make sure you don't remove any events that something else has bound.

Another option is to use the DataTable.isDataTable() method to check if a table is a DataTable, and if it is call destroy() and remove any events that you've added. I personally consider this method to be "cleaner", but that might just be personal taste

We intentionally don't remove any events added by the developer (i.e. yourself), since you might want them to be reused. Just like with other libraries, if you add an event you are also responsible for removing it.

Allan