Expand a specific row

Expand a specific row

robyonerobyone Posts: 16Questions: 3Answers: 0

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.

This question has accepted answers - jump to:

Answers

  • robyonerobyone Posts: 16Questions: 3Answers: 0

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

  • robyonerobyone Posts: 16Questions: 3Answers: 0
    edited July 2015

    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 ();

  • robyonerobyone Posts: 16Questions: 3Answers: 0

    heeeeeeelp!!!!!! ;-)

  • robyonerobyone Posts: 16Questions: 3Answers: 0

    Is there anyone????? :-(

  • AshbjornAshbjorn Posts: 55Questions: 2Answers: 16
    edited July 2015 Answer ✓

    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,

  • robyonerobyone Posts: 16Questions: 3Answers: 0

    It works!!! Thank you very much!

  • robyonerobyone Posts: 16Questions: 3Answers: 0
    edited August 2015

    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.

  • allanallan Posts: 55,832Questions: 1Answers: 8,817 Site admin
    Answer ✓

    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

  • robyonerobyone Posts: 16Questions: 3Answers: 0

    Great! Thank you.

This discussion has been closed.