Table Selection reports different amount of rows

GGJacob

I'm using the Selection plugin, and trying to identify which row is selected and how many so I can work with that information. By default, my table is already showing how many rows are selected using select-info, but this number varies from the methods I'm using to gather that information myself. Here is an example of what I'd be doing

var table = $('#table_id').DataTable({
    select: true
});
 
table.on('click', 'tr', function() {
    $('#selectedButton').html('Selected: ' + table.rows({selected: true}).count());
});

Obviously I have the button created somewhere else. Anyways, the number reported using the default label in select-info is always correct and matches the visuals, but the number listed using the table.rows().count() method is always one step behind. So on the first click and selection, it shows 0. then on the next click it shows 1. I can select multiple, or go back to 0, it will always show the number of the last click. I then decided to work with the .select() and .deselect() methods to test those. I added a simple method to try and select all of the rows

table.rows().every( function() {
    this.select();
});

This did not effect any of the rows outside the one that was clicked. There was no change visually, the default counter remained at one, no .selected classes were added, but the thing that did change was how many rows were labeled as selected using my table.rows().count() method. It's almost like there are two different counts happening.

To test further, I added another button and html change to the on('click') method. This button would track the ID that is in the first cell of the row, and change it depending on what row was clicked. It looks something like this

$('#infoButton').html('Selected: ' + table.row(this).data()[0]);

This showed that the clicks were registering on the correct rows properly, and that the timing of the on('click') method seemed fine. For some reason, any methods I try to use to count the amount of rows selected show up wrong. I've tried table.rows('selected').data().length, and a few other methods. They return the same, delayed by one step, response. I'm sure I'm missing something simple, but this has really confused me. Thank you in advance.

colin

I just tried it here - please select a few rows then press the "count" button. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

GGJacob

Hello Colin,

That example does seem to work. I think it's an issue with the timing of the on('click') method happening during a click of a row. I'm willing to bet that the counting is happening faster than the actual selection, and so the count is measuring the state beforehand. Your method uses a button to start the count, so the selection is already registered by the time you move your mouse to click the button.

Here is an example

Assuming this is correct, I think the best temporary solution would be some sort of artificial delay. I tried this, using window.setTimeout, but I don't think I did that properly.

kthorngren

Try using the select event instead. Here is an example.

Kevin

GGJacob

Thank you kthorngren,

That works perfectly. I'm sure it's because the select event happens after selection while the click event occurs before.