How do I show a row as selected programmatically

RajuVarghese

I am getting my data with ajax and render it with DataTables 1.10.12. During initialization I would like to show one row as 'selected'. One way to do that is to add the CSS class '.selected' to the relevant row after iterating through all of them and locating it. Is there a better way than that?

allan

Yes, use the row().select() method to select a row rather than adding a class. The class will show it as visually selected, but it isn't really (to the API at least!).

Allan

RajuVarghese

Thanks for that pointer. So to select a particular row depending on the content of that row I tried to do it with ...

      table.rows().every (function (rowIdx, tableLoop, rowLoop) {
        if (this.data().DESIREDITEM === DESIREDVALUE) {
          this.select ();
        }
      });

... but this does not have a select() function. What does this point to if it is not the current row?

Thanks in advance.

allan

That looks correct. Have you included the Select extension?

Allan

RajuVarghese

Ok, that's the problem. Thanks. Will download it and try again.

Thanks for your quick help.

Raju

RajuVarghese

I'm sorry I have to come knocking on your door again. I downloaded DataTables with the select option. Now the code executes without an error but the selected row does not get displayed as selected.

Further questions, if the selected row is not on the first page how do i tell Data Tables to display the page where the selected row is? Is there an 'on select' callback that can be used to display the row number of the selected row, for example?

Thanks.

allan

Can you give me a link to the page showing the issue so I can help debug it please. Or use JSFiddle (etc) to create an example showing the problem if you can't link to the page.

Is there an 'on select' callback that can be used to display the row number of the selected row, for example?

There is - select. However, if you are using row().select() you would probably be better using something like:

var displayIndex = table.rows( { order: 'applied', search: 'applied' } ).indexes().indexOf( this.index() ); // where `this` is the `row()` - for example in `rows().every(...)`
var pageSize = table.page.len();

table.page( parseInt( displayIndex / pageSize, 10 ) ).draw( false );

i.e. jump to the page where the row is - having found it from its index.

There might be an off by one issue there - I'm not certain without trying it. You might want to test for that!

Allan

RajuVarghese

Thanks, Allan. The code is a bit involved due to the application but I shall try and get the essence of the code into jsfiddle and let you know where it is. Please bear with me as it may take a few days.

Raju