Row Selection and Multiple Checkboxes

Bruce Warmer

Hi,

The following is not quite the exact functionality that I am looking to acheive, but I think it is close enough and I have put forward a simple example to illustrate it.

I have a table that has more than one checkbox. I would like to use the row select feature of Datatables to automatically select the first checkbox. I can do this already. However, I would like to be able to manually select the second checkbox without having the selection highlight disappear.

Please see the example:

https://live.datatables.net/piqaquhi/4/

All suggestions gratefully received.

Thanks,

Bruce.

kthorngren

Use the select.selector to limit what can be used to select the row. Updated example:
https://live.datatables.net/lukoliqo/1/edit

There were a couple errors in your test case. You were loading datatables.js twice causing console errors. Also the checkboxes were in th elements instead of td elements.

You might also be interested in these Select checkbox examples.

Kevin

Bruce Warmer

Hi Kevin,

Thanks for the response.

However, I want to be able to use the standard row selection feature so that I can select anywhere within the table, and also use the extended selection abilities.

As an example, I would like to be able to select somewhere in the Office column on the first row, and that would select the row (and the default checkbox, which I can do), and then shift+select the third row, which would result in the first three rows being highlighted. and that would also result in the default checkbox for these rows being selected (again, I can do this). I would then like to be able to select some of the optional checkboxes without the row selection changing.

Thanks,

Bruce.

kthorngren

Its a matter of using the proper jQuery selector to add or remove the elements you want. Is this example more like what you are asking for?
https://live.datatables.net/nogemafu/1/edit

Kevin

Bruce Warmer

Thanks, but no.

I want to be able to select in any column, even the option column, as well as use the extended selection abilities when selecting any column. This will highlight the rows (and in my code select the default checkbox). I then want to be able to select the optional checkbox for some of the rows without destroying the existing selection. I.e. all I am doing in this last bit is ticking a couple of checkboxes.

Bruce.

kthorngren

One thing I noticed with my examples is selecting or deselecting a row doesn't keep up with the checkbox checked state in the first column. Use the select and deselect events for this with rows().nodes().

As I said change the selector to include and not include the elements you want. I updated the example to show both the select and deselect events and selecting the row by clicking any td but not the Option column checkbox.
https://live.datatables.net/nogemafu/2/edit

I'm confused because you keep mentioning multi-row selection. All of the examples allow for this. Does it not work the way you want? If not refer to the select.style docs for other options.

Kevin

kthorngren

I did a bit more testing and see that toggling the Option checkbox with multiple selected rows clears the selections. I added console.log statements to see this. For example:

Select the first row:

select [0]

Shift select the second row:

select (2) [0, 1]

Check or uncheck any of the Option checkboxes:

deselect (2) [0, 1]
select [2]
deselect [2]

It deselects all the rows then selects the row clicked on then deselects that row.. I wasn't expecting the select events to fire in this case.

Hopefully @allan can help with the proper selector or provide a workaround.

Kevin

Bruce Warmer

I have found a solution. I have used the user-select callback and checked the column being used in the selection. If it is the optional checkbox column then I select the checkbox and then return false. This prevents the standard selection mechanism kicking in.