Hide / Show Child Rows With jQuery

Hide / Show Child Rows With jQuery

acmstaffacmstaff Posts: 2Questions: 1Answers: 0

Hi everyone -

I'm attempting to hide/show rows created using dataTables' child row mechanic. This is to say, I have row X with children a, b, and c. I can hide row X ( $('#rowXID').hide() ), but all of the child rows remain.

Is there a way I can hide both the parent and child rows? Attempts to target the child rows using variations of .child.hide() and .children.hide() so far haven't worked. Any help would be appreciated - thanks!

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    edited February 2021

    I can hide row X ( $('#rowXID').hide() ),

    Datatables won't know about this and will think the row is still shown. Doing this may affect sorting and searching.

    To hide child rows you will need to use row().child.hide() as documented in the example you linked to.

    If you still need help please post a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • acmstaffacmstaff Posts: 2Questions: 1Answers: 0

    Hi there-

    Unfortunately, for whatever reason that doesn't work. I went into console to target a specific row and hide its child, but received an error saying it cannot read property 'hide' of undefined:

    I can't create a public test case just yet, but the code I use to create the child looks like this:

    (and)

    I'll try and put together a public test case later tonight if need be.

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    edited February 2021

    You need to use the row() API to get an instance of the row. See the row-selector docs for the supported ways to select the row. Maybe something like this:

    table.row( '#dataRow_11214_45' ).child.hide();
    

    Kevin

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Just to add a little more to Kevin's reply, $('#dataRow_...') is going to return a jQuery instance. It doesn't have a .child object, which is why it is why the error is saying that ti is undefined.

    In Kevin's answer, he uses table which is a DataTables API instance in this case - i.e. the result of:

    var table = $('#myTable').DataTable();
    

    Is there a way I can hide both the parent and child rows?

    Forgetting the child row for the moment, the way to "hide" a row in DataTables is to remove it using filtering. What is the criteria you have for removing it? When you filter out a parent row, the child row will automatically be removed by DataTables.

    Allan

This discussion has been closed.