Setting the selected rows given an array of items

hitostacha

Hi guys,
I'm selecting the data from my table and return the selected data to a variable with the following code:

$('#dataTable tbody').on( 'click', 'tr', function () {
            $(this).toggleClass('selected');
            array = dtHandler.rows('.selected').data().toArray();
        } );

I want to update the selected rows in the table whenever the array changes, I've got a method to watch for the array changes but I can't figure out how to set the selected rows giving it the array of objects

colin

Hi @hitostacha ,

The Select extensions selects rows based on the row selector - see rows().select(). The best bet would be to either keep another array containing the rows, or just get the data() from the rows when you need it.

So, something like:

array = dtHandler.rows('.selected');

// when you need data
data = array.data().toArray();

// to reselect
array.select();

Cheers,

Colin

hitostacha

The problem is that I'm looking to re-select given the data in the array, not re-select what was previously selected, for example I'm using .splice() to remove an item from the array, using a method triggered when a certain event happens, and I want it to be reflected in the table

colin

Hi @hitostacha ,

Yep, understood. The problem with only storing the data is in the array is that to reselect those remaining, you'll need to scan all the rows and reselect those that match - and you'll need some uniqueness in each row for that to happen. The pseudo code would look something like:

toSelect = [];
dtHandler.rows().every(function ( rowIdx, tableLoop, rowLoop) {
  if (this.data() is in array) { // << not pseudo code here
    toSelect.push(rowIdx);
  }
})

dtHandler.rows(toSelect).select();

Hope that helps,

Cheers,

Colin

hitostacha

Hi, sorry for the long time I didn't reply to the post, I was away.

So that is finding the rows alright, but the console says that the method used to select/deselect the rows doesn't exist.
I'm using

$('#dataTable tbody').on( 'click', 'tr', function () {
            $(this).toggleClass('selected');
        });

to select the rows

hitostacha

OK, doing a little copy-paste from row-selector docs(https://datatables.net/reference/type/row-selector) I managed to get it working as I wanted... But I think it's a bit of overkill since it can be resource,consuming if I select a lot of data, right? Here's the code:

let toSelect = [];
                this.dtHandle.rows().every(function ( rowIdx, tableLoop, rowLoop) {
                    let row = this;
                    if (array.some(function(el) {
                                return el === row.data();
                            })) {
                        toSelect.push(rowIdx);
                    }
                });
                this.dtHandle.rows()
                        .nodes()
                        .to$()
                        .removeClass( 'selected' );
                this.dtHandle.rows(toSelect)
                        .nodes()
                        .to$()
                        .addClass( 'selected' );

Isn't there a more efficient way to do it in the "every" function?