Display multiple child rows

cschnaars

Hi, everyone:

I want to build a data table with a little more than 100 rows of data. However, each of these parent rows has anywhere from 1 to 5 rows of child data that I want to display when the parent row is clicked. Can someone tell me whether this is possible and, if so, give me some guidance on how to implement this?

I found this example in the forums: http://www.datatables.net/examples/api/row_details.html

However, this example appears to be a collection of parent rows where some fields are hidden unless a row's button is clicked. I could modify my JSON file to bake all the child rows into the parent rows, but I'm concerned about the fact that the number of parent rows is not consistent.

Thank you, and apologies for the vague question.

chris

fbas

in that example, opening up the row details triggers dynamic loading of content. your content can be whatever you want, so you could load a table with 1 to 5 rows of data as you intended.

I think that's the way to go.

cschnaars

Thanks for the comment. Unfortunately, I'm still trying to figure out how to do what fbas suggests.

I can format my data file to whatever format is needed for the data table. But just to help visualize this example, let's say I have a data file like this:
[code]{ "aaData": [
{
"employee": "John Smith",
"region": 4
"city": "Duluth",
"state": "Minn.",
"sales": [
[2007, "$3,043,692"],
[2008, "$4,263,417"],
[2010, "$312,902"]
]
},
{
"employee": "Allan Jones",
"region": 1
"city": "Bethesda",
"state": "Md.",
"sales": [
[2007, "$11,213"]
[2008, "$990,576"]
[2009, "$842,107"]
[2010, "$1,641,863"]
]
},
{
"employee": "Jennifer Hill",
"region": 5
"city": "Miami",
"state": "Fla.",
"sales": []
}
]} [/code]
What I want to be able to do is post a data table that only shows the employee, region, city and state fields. But the user also could click a parent row to view the annual sales data contained in the child rows. You can see from the example, that one person has three child rows, one has four and one doesn't have any. The number of child rows is arbitrary, and that's what I can't figure out how to handle.

I've found examples of data displayed when it's just a collection of parent rows, with some fields hidden until the row is clicked to display more data:
http://www.datatables.net/examples/api/row_details.html
http://datatables.net/blog/Drill-down_rows

I've also found a blog post by Allan that shows how to use child rows that are really arrays within a parent row:
http://datatables.net/blog/Extended_data_source_options_with_DataTables
But the blog post sample code has exactly one child row per parent. I haven't been able to figure out how to extend this so I can have an arbitrary number of child rows.

Would I have to write a JavaScript function that takes the "sales" array as an argument, then loop through the individual arrays within to create a dynamic html table?

Thanks in advance for your help.

chris

fbas

I suggest using the drill-down row. it's just one row, but you can turn your "sales" array of arrays into a table (even into a datatable) and put that table into the drill down row

cschnaars

I didn't want to leave this thread hanging, particularly since fbas was kind enough to respond to my posts. I took fbas' suggestion to use Allan's drill-down row example (http://datatables.net/blog/Drill-down_rows) as a template. From there, I built a JavaScript function that parsed the array of arrays and dynamically built a second table that is displayed under the "parent" row.

One problem I was having with the master array is that each child array was made up of key-value pairs. I'm not very well versed in JavaScript and could not figure out how to work with this data without removing the keys. Once I did that, my function worked perfectly.

I'm still developing the table but hope to have something online within the next two weeks. The issue of how to build the child rows, however, has been completely resolved. Thanks, fbas!

chris

cschnaars

We FINALLY got this data table up and running. It highlights NCAA football coach salaries. Besides the accordion rows, which display data pulled from nested arrays of contracts data, we have embedded Google charts. You can find it here:
http://www.usatoday.com/sports/college/football/story/2011-11-17/cover-college-football-coaches-salaries-rise/51242232/1

Blog post on how we did the accordion rows: http://www.chrisschnaars.org/2011/11/16/building-jquery-datatables-with-expandable-accordion-rows/

Thanks again, fbas!

chris