Selecting a record after retrieving data via ajax

dan@19ideas.com

I have a table that is retrieving data via ajax, is there a way to automatically select records based on data being a certain value?

Like if I have a table of fruits, can I look at a column and find if a cell with the value = "Apple" is there, and select that record? I need this to happen automatically when the table gets loaded with the data.

allan

Use the init event handler perhaps:

var table = $('#myTable')
  .on( 'init.dt', function () {
    table
      .rows( function ( idx, data, node ) {
        return data.fruitType === 'Apple';
      } )
      .select();
  } )
  .DataTable( {
    ajax: ...,
    ...
  } );

That uses rows() with a function selector and then rows().select() to select the rows.

Note that this will only work if you are using Ajax. If you are using DOM loaded data you need to do $('#myTable').DataTable() inside the init event handler again, since the DOM sourced table's init is sync (as opposed to async for the Ajax).

Allan

dan@19ideas.com

Hi Allan,

The init doesn't work in my case. I'm actually using a dependent child table that is loaded via ajax, so the datatables component isn't loaded when the page loads, when I select a record from a parent table, the component is then loaded via ajax and is displayed with related records.

If I used the functionality you posted on my parent table, that works. It just doesn't work for the ajax-loaded child table.

Also, the child table gets reloaded each time I select a different record from the parent table, this is done using ajax.reload(). So even after the child table is loaded, it still never executes the function inside the init, regardless of whatever record I select from the parent table.

To stay with the example, lets say I have a list of farms in my parent table.. and I have a child table that shows a list of all possible produce for a particular farm. I don't want to show the second table because nothing has been selected in the parent table yet. When I select a row, the child produce table gets displayed, and it highlights all fruits that are in inventory.

The thing is, I don't want a selection to trigger any events either, because the act of selecting a produce does something. So I just want the records to be highlighted only.. like applying a css over it.

dan@19ideas.com

So far xhr is the only event that works that way I want it to, but no records get highlighted unfortunately. I'm assuming that gets triggered before a render is performed.

allan

Yes - what to do is:

table.on( 'xhr', function () {
  table.one( 'draw', function () {
    ...
  } );
} );

That way you can trigger your highlight function on the draw after the xhr event.

Allan

dan@19ideas.com

I was just about to post this answer, and then I saw your post..

      rowCallback: function (row, data) {
        if (data.fruitType == 'Apple') {
          $(row).addClass("selected");
        }
      }

Is there an advantage to using the xhr trigger and drawing it rather than using a rowCallback on the child table?

allan

Nope - rowCallback as you have done will do nicely. It will execute each time a row is displayed, but I doubt anyone will see a performance difference.

Allan