Not getting selectItems event using Select plugin

joed67

I have a DataTable where I want the users to be able to select one or more rows, and for the row(s) selected, it displays other info on the page. I want a row to be selected, and stay selected, until either clicked again to deselect it, another row is clicked - then the first row will be deselected and the new row selected.

The Select plugin works very well for this. But when I handle the events "select deselect", it has a side effect of giving me both the select and deselect events when changing the selected row.

Example:

Click row 3 to select -> event "select" is triggered for row 3
Click row 3 to deselect -> event "deselect" is triggered for row 3
Click row 5 to select -> event "select" is triggered for row 5
Click row 4 to select -> event "deselect" is triggered for row 5 and event "select" is triggered for row 4

So I have a "deselect" event, which I handle, but immediately followed by a "select" event which I handle. So what the code did on the "deselect" event was just wasted time because of the "select" that immediately follows it.

I'm looking at way to not waste the time on the "deselect" event if it could know a "select" event immediately follows it. I don't think there is a way to peek ahead at what events are queued up.

So in the docs, I found the "selectItems" event - https://datatables.net/reference/event/selectItems

"This event is triggered whenever the items that are to be selected (rows, columns, cells) is changed."

This seems to be what I want - but it isn't working.

I have this example code:

http://live.datatables.net/tunuxepa/1/edit?html,css,js,output

If you click rows in the table, the event code does not run:

  proptable.on('selectItems', function(e, dt, items) {
    alert(e.type);
  });

If I change this to use "select deselect" it does fire:

  proptable.on('select deselect', function(e, dt, items) {
    alert(e.type);
  });

Why is the selectItems event not firing?

kthorngren

The selectItems event fires when the type of selection is changed not when a selection or deselection is made. From the docs:

This event is triggered whenever the items that are to be selected (rows, columns, cells) is changed.

It will only fire if you use select.items() to change from selecting rows to cells for example.

Sounds like the problem you are seeing is when selecting a row, then selecting another the first is deselected causing both events to fire. Are you wanting to do something when rows are deselected? If not then all you need is this:

proptable.on('select', function(e, dt, items) {
  alert(e.type);
});

Please describe the problem you are trying to solve. And what you are trying to do in the select and deselect events.

Kevin

kthorngren

Maybe the user-select event will do what you want. Like this:
http://live.datatables.net/tunuxepa/3/edit

Looks like it fires only once when selecting a row then selecting another.

Kevin

joed67

@Kevin,

OK, I was expecting that selectItems was fired when the user selected an item.

This is what I am doing - I present a DataTable of rows (in my case, properties).

There is another section of the page that displays summary information (charts, etc.) about the properties.

When no properties are selected, it displays a summary of ALL rows in the DataTable.

When one or more are selected, the summary only includes those that are selected.

So my problem with select/deselect is that if one row is selected, the summary section includes only that property.

If I simply switch it to one other row, I get a deselect event - and at that point, no rows are selected, so the summary displays for the entire table (see above - when no rows are selected, it is as if all rows are selected). This adds some extra work because the sequence of simply changing a selection is:

Row select -> summary = single property
Row deselect -> summary = all properties
Row select -> summary = single property

So it spent time on that second deselect to summarize all properties - but no one will ever see it because there is a select event queued up.

The problem with only capturing the "select" event is that I will never know when the user selects a single property, then deselects it because they really want to see all properties and have none selected.

I think what @kthorngren mentioned about user-select might work. I'll give that a try. It is firing once when I select or deselect.

joed67

@kthorngren Yes, "user-select" does only fire once when a row is selected or deselected. It's exactly what I need, but.... the docs say:

"This event is triggered before items are selected based on an interaction with the table by the end user (typically clicking on a cell in the table)."

So this code is not going to work:

var rowData = proptable.rows({ selected: true }).data().toArray();

because the row isn't selected yet. Still digging a little more.

kthorngren

I see the problem, thanks for the explanation. Its a bit of a hack but maybe you can use a setTimeout function in the deselect event to allow time for the rows to be selected. This uses the count() API to get the count of selected rows after a short delay, 0 works in the test case.
http://live.datatables.net/lusimaqi/1/edit

Kevin

allan

Kevin's suggestion is exactly what gets used in SearchPanes to not update twice in quick succession for a select / deselect event. The trouble is, that there is no way to know if a select will follow a deselect, so a small debounce timer is used.

Here is a small modification to Kevin's example showing how I'd approach that.

Allan