Hide / Show Child Rows With jQuery

acmstaff

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!

kthorngren

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

acmstaff

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.

kthorngren

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

allan

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