child row visibility bug

Innerwolf

Hey, hope this is an easy one.
I've modified the child row code in a way that maximal one subrow is visible at once, so if you click on another td of the main table all other opened child rows get closed and then the clicked one opens. Needless to say that another click on the already opened row closes the same. This works well but I've come across a problem: When I click on a row, leave it open then switch to another page and click some rows, none of them close. I don't understand why, because the starting point of the new page should be the same as the one of the first page (no .shown classes etc.). This applies to any page EXCEPT the first one. So if you reload, go to page two, open a row and go back to page one, it works properly. Code:

$('#scoreboard tbody').on('click', 'td', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        if(row.child.isShown()){
            row.child.hide();
            tr.removeClass('shown');
        }else{
        table.row(".shown").child.hide();
        $("#scoreboard tr").removeClass("shown");
 
        if ( row.child.isShown() ) {} else {
            row.child( format(row.data()), 'addinfowrapper').show();
            tr.addClass('shown');
        }
     }
 });

Same applies to search function!

Case: http://zcatch-ranking.host56.com/

Thanks for any help!

Ashbjorn

Hi Innerwolf,

Make sure that your function call is within a $(document).ready(function() { }); statement to ensure the DOM has loaded, preferably within the same one as where your DataTable gets initialized.

Additionally you could take a look at this page for any guidance: Child rows (show extra / detailed information).

Be aware of tiny mistakes like spelling or positioning of your event.

Hope this helps,

Innerwolf

@Ashbjorn it is already in the same $(document).ready statement as the datatables initialisation

Ashbjorn

Perhaps you can create an example using http://live.datatables.net ?

allan

When I click on a row, leave it open then switch to another page and click some rows, none of them close

Its because you are querying the DOM rather than DataTables:

 $("#scoreboard tr").removeClass("shown");

That will select rows in the document. But DataTables removes rows from the document that aren't needed. So you need to use the DataTables API - $( table.rows('.shown') ).removeClass( 'shown' ) for example.

I'm not sure that is the only change required (impossible to say without a test case), but it will be a step in the right direction.

Allan

Innerwolf

Didn't change anything @allan, but I've created a test case with 150 values:

http://live.datatables.net/papazali/1/edit?html,js,output

But somehow this works worse than the original page. Breaks after three opened rows for me...

Ashbjorn

It seems to work just fine in that example, or I am still not fully understanding :\

Innerwolf

@Ashbjorn I want the maximum of visible child rows to be one! That means if I have already got one and click on the next, the previous should disappear.

allan

Weirdly your code did sort of work for a while and then stops working...

However, here is an update that will always work: http://live.datatables.net/papazali/2/edit .

I've just used $('td:eq(0)', table.rows(".shown").nodes()).click(); to hide any currently shown rows.

Allan

Innerwolf

Thanks for your solution allan, keep up the good work!

Sorry for bothering you, but a new problem has come up ^^ There is now only one row visible but that only applies to that individual page. So when having one row opened, switching to another one (opening another row) and coming back to the first page, the previously opened row will still be visible. This could be a problem when using for example the search function to bring tthe opened child rows on one page

(i.e. expand the last row on the first page and the first on the second page, then search for 16.5)

http://postimg.org/image/5ww1zm63f/full/

Innerwolf

Any suggestions?

allan

You need to give us more than a few hours before bumping a post :-). If you require urgent support priority support is available.

I've updated your code here: http://live.datatables.net/papazali/3/edit .

The issue was that the click event wasn't occurring if the row has been removed, so I've just used the API to perform the same action.

Allan

Innerwolf

Thank you very much allan and sorry, but I didn't know that.. Didn't want it to get lost after marking it as answered :o