Answers

• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2018

  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 Posts: 56Questions: 13Answers: 1

  June 2018

  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 Posts: 56Questions: 13Answers: 1

  June 2018

  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 Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2018

  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 Posts: 56Questions: 13Answers: 1

  June 2018

  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 Posts: 63,523Questions: 1Answers: 10,473 Site admin

  June 2018 Answer ✓

  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