Row selecting based on the row index of the data source after rowGroup

nathan1812

Hi there,

I was able to implement the row selection feature by referencing this link: https://datatables.net/examples/api/select_single_row.html and the multi level rowGrouping feature through this link: https://datatables.net/extensions/rowgroup/examples/initialisation/multipleGroups.html... My data source is an array, and I could easily loop through it to get the row index. Now my question is if there's a way that I can relate this array row index with the matching table row index (after multi-level grouping and rendering on the table) and select it... If it's hard to visualize what I'm trying to ask, I will provide a live table to demonstrate my idea... Thank you!

kthorngren

Look at using rowId to set the tr id. I think you can set the rowId to the index of the id column in your array. Then you can use the id to select the row, see the row-selector docs. There is an example of using the id. TO select the row with the id will look something like this:

table.row('#' + my_id).select();

Kevin

nathan1812

Hi Kevin,
Thank you for the reply, Sir!
I got the part rowId done now. However, when I used
this "table.row('#' + my_id).select();", it poped up the error saying that "table.row(...).select is not a function"... so instead, I'm using "$('#' + my_id).addClass('selected')" as my solution, but then I got into another problem. Usually, when we select a particular row in our table, the previous selected row will be unselected. But now since I purposefully use 'addClass('selected') to a specific row based on the row index, and then would like to select another one, it does not unselect the one that I add class 'selected'... Is there a way that I can fix this behaviour, something like only one selected row at a time in the datatable?
Thanks!

kthorngren

"table.row('#' + my_id).select();", it poped up the error saying that "table.row(...).select is not a function"

Sounds like you aren't using the variable table. You can do this:

var table = $('my-table-selector').DataTable();
table.row('#' + my_id).select();

Or use the variable you create during Datatable initialization. See the Accessing the API docs for more details.

Another option is to use jQuery removeClass and remove the selected class from all rows first, like this:

$('tr').removeClass('selected');
$('#' + my_id).addClass('selected');

Kevin

nathan1812

Thank you Kevin as always!