Setting the selected rows given an array of items

Setting the selected rows given an array of items

hitostachahitostacha Posts: 5Questions: 2Answers: 0

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

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,599
    edited October 2018

    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

  • hitostachahitostacha Posts: 5Questions: 2Answers: 0

    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

  • colincolin Posts: 15,237Questions: 1Answers: 2,599
    edited November 2018

    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

  • hitostachahitostacha Posts: 5Questions: 2Answers: 0

    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

  • hitostachahitostacha Posts: 5Questions: 2Answers: 0

    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?

This discussion has been closed.