How to trigger click on detail parent rows

southfanning

I have a datatable with detail rows, pretty much following the standard example. Each row has a + sign for details. I want to add a button to expand them all if they aren't already open. I have a function using .every() that's alerting 'not shown' or 'shown' if the details are open. It's working fine. I'm having trouble with the syntax for triggering the click though. Any help would be appreciated.

oTable.rows().every(function(rowIdx, tableLoop, rowLoop){
      if (!this.child.isShown()){
        alert('not shown');
        //trigger the click event for the details
        this.node().to$.find('td.dh-dtbl-details-control').trigger('click');
      }
      else
        alert('shown');
    });

rf1234

Try this:

oTable.rows().every(function(rowIdx, tableLoop, rowLoop){
      if (!this.child.isShown()){
        alert('not shown');
        //trigger the click event for the details
        $('tr td:first-child').click() ;
      }
      else
        alert('shown');
    });

HPB

@rf1234
I have no idea why that would work and I'm sure it wouldn't.

Going from the example you need to change line 5 of your code with:

$('td.details-control', this.node()).trigger('click');

It's short for finding all td nodes with class details-control that are part of this.node() and trigger a click event,

Keep in mind this will trigger for all rows, even the ones on other pages that are currently not visible. But click events won't work on other pages, so it will only work for your current page.

rf1234

@HPB
Thanks for you comment! While I would like not to comment on this one:
"I have no idea why that would work and I'm sure it wouldn't." I can reassure you that I tested my suggestion. It works. A click on the first column opens the child row. And that is what this simple statement does. It is not mandatory to use the API for everything. Basic jQuery also works.

I also tested your suggestion and it didn't work.

On my page there is no "td.details-control" because I mostly let Datatables generate child rows automatically when needed or I assign class="none" to a column to have it put into an automatic child row.

For that reason I tested this as well:

$('td:first-child', this.node()).trigger('click');

works even without assigning class 'details-control'.

southfanning

Thanks guys. I actually went with $('td.details-control', this.node()).trigger('click'); since I removed the class on any rows that didn't have detail data. Works great.