Expand a specific row

robyone

I have a responsive table : how I can, programmatically, expand a row that is automatically collapsed with the reduction of the screen?
I hope I explained, is a very basic need: all the rows of my table are collapsed because the screen is small; I have an id of a specific row, I want to expand this row and show the child row to render all the data therein.
I don't have to pass the data, as the examples in the documentation, because the data are already there: I just want to display data from a specific collapsed row.
How can I do? Thank You.

robyone

No one can help me? It seems a very easy question for who knows well DataTables and the solution can be useful to many!

robyone

This is an example:

http://test.hostingveloce.it

1. reduce the browser window to collapse the rows.
2. by clicking the button "Expand row 2" I would get the same result by clicking on the "plus" button in row 2: basically I have to trigger the click event of the "plus" button on the second row, pressing on my button.

do not work:
var table = $ ('#tablename'). DataTable (); var row = table.row (x); $ (row) .Click();

do not work:
var table = $ ('# tablename'). DataTable (); var row = table.row (x); row.child.show (); table.draw ();

robyone

heeeeeeelp!!!!!! ;-)

robyone

Is there anyone????? :-(

Ashbjorn

Hello robyone,

When you enable responsive mode it handles the child row management by itself, so using the row().child and row().child.show() won't actually trigger anything since Responsive is handling those selector events.

There might be a better way to achieve what you want, but at least using a CSS selector approach you can specifically target the row you want to "expand" like so:

var rowIndex = 2;
var targetRow = 'tr:nth-child(' + rowIndex + ')';

$('#tabella1 ' + targetRow + ' td:first-child').trigger('click');

I made the variables a bit elaborate since I am going to assume you will have your own way of passing the index, this way you can just substitute your own method to fill up the targetRow variable (which by itself is also optional).

Again there might be a better way to achieve this, but my knowledge stops here :)

Hope this helps,

robyone

It works!!! Thank you very much!

robyone

Ashbjorn, I discovered that there is a problem: rows childs disturb rows counts of CSS selector!!!
In fact, in the example I published now in http://test.hostingveloce.it , if all the rows are collapsed and click on "expand row 3", line 3 expands correctly.
But if expand the line 1 or 2 by clicking the plus button and then I click on the "expand row 3", the wrong row is expanded, because the rows childs 1 or 2 disturb rows counts !!!
Is there a way to solve this problem? Thank you.

allan

I would suggest:

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

You'll probably need to modify it to suit your exactly use case, but using row().node() would be the way I would do it myself.

Allan

robyone

Great! Thank you.