Show/Hide All Child Rows and Child Row Formatting

trongart

This test case includes sample child rows that are all opened on table initialization: live.datatables.net/putarafo/3/edit

I added the button "Hide All Child Rows" that removes all child rows when clicked and then changes to "Show All Child Rows".

2 Questions:

1) This functionality works fine on the current page, but when you go to any other page or change the number of rows to show, further child rows remain opened. How can all child rows be opened and closed (and stay so) on all pages throughout my datatable?

2) In the format(d) function, how could I change the color of individual strings by a condition? For example, if 'a' is included in the string, this letter should be red, else it should be black.

kthorngren

When using Datatables the only rows in the DOM are on the page being displayed. jQuery and Javascript operations DOM elements will only apply to the current page.

You could loop through all the rows using rows().every(). This example shows how to reopen child rows after an ajax.relaod(). Your loop would look similar.

Another option that might be more efficient is to use rowCallback. In the rowCallback you would hide or show the rows based on the status of the button. This way each time the page is drawn the rows are updated appropriately.

In the format function you can use if statements to check for the conditions you are interested in. Instead of simply returning a string you will need to wrap the data in an HTML element and apply the attributes or classes as desired. This example places the data in a table element. You can use whatever HTML elements work for your requirements.

Kevin

trongart

@kthorngren Appreciate your input!

In regard to 1) I tried to use the rowCallback option with the data-status attribute of the button as you suggested in this test case: live.datatables.net/yefulixu/1/edit

It works as intended, but a bit strange: For example, on the first page, you click on the button, then go to the second page and child rows are still open. Then you go to the third page and back to the second and they are closed then. Child rows also stay open when using the search filter. What is incorrect here?

kthorngren

Sorry I wasn't clear. I had intended for you to use the Datatables APIs to opena nd close the rows. See this updated example:
http://live.datatables.net/vocihuxe/1/edit

Kevin

trongart

@kthorngren This works- thank you very much! I added a formatting component that changes the text color of the table to red once the button is clicked here: live.datatables.net/volixoha/1/edit

I've added this part into the button function and into rowCallback, but the color does not change from page 2. It changes correctly only after you go to page 2 for example and back to the previous page and then back to page 2. It also does not work when searching the table. Does this require a different approach?

kthorngren

In your format function you have this:

return '<div id = "childRowClass">'+d[1]+'</div>';

Each child row is going to have the same id. The id is expected to be unique among all the elements on the page. You can use a class instead.

You don't need that long jQuery selector in rowCallback. Please look at the docs and note what the function parameters are. The first is the row. You can simply use $(row).css('color', 'red');. Updated example:
http://live.datatables.net/volixoha/2/edit

Kevin

trongart

@kthorngren I've found out why there was an inconsistency between the test cases and my project in regard to the formatting question:

I've changed the child row to class as you suggested. Doing so, I added $('div.childRowClass').css('color', 'red'); into the rowCallback to make the text red when you click on the button. (I understand that there are other ways to do this, but I'm looking for this specific case to work as I am going to make changes to this via jQuery later after the table loads initially.)

In the HTML test case, this works correctly as intended as child rows stay red when going page to page: live.datatables.net/fizowoha/1/edit

However, when using Ajax as in this test case, child rows are red only after I go to page 2 and back to page 1 and then back to page 2 again: live.datatables.net/xejibuqo/1/edit

Does an Ajax data source need a different approach for this?

kthorngren

Looks like its a timing issue with inserting the child rows into the dom. Take a look at this example:
http://live.datatables.net/zuxutiba/1/edit

I added a console.log to show how many child row elements are added, with your selector $('div.childRowClass'), when rowCallback runs. I added initCallback to redraw the table. The first time 0 elements are found. The second 10 (all rows) elements are found. You may want to consider using drawCallback for $('div.childRowClass').css('color', 'red'); so it runs once for each of the 10 rows instead of 10 times for each of the 10 rows in rowCallback.

I added a setTiemout function to add a slight delay here and removed initCompete:
http://live.datatables.net/yuxuzelo/1/edit

Kevin

trongart

@kthorngren This solves the issue, especially with drawCallback. Thank you very much again!!