Expanding Rows pulling data purely from tables?

radeonorama

Hi, I have an old inherited system which currently uses tables with some jquery to enable a user to click on a row which then expands to display a nested table with further details.

Can anyone give me some basic guidance on how i could use something like this http://datatables.net/release-datatables/examples/api/row_details.html to expand and show the data from the nested table?

Any help would be greatly appreciated.

All the best, Rad

radeonorama

I just though i would add that when i say tables, i just mean standard html with a nested table within that. Thanks again.

allan

This tutorial shows how to build an expand / contract table: http://datatables.net/blog/Drill-down_rows .

Allan

radeonorama

Thanks for that Allan. I'm just a bit lost on the data source bit. This html doesn't have a datasource as such, its just one big dumb static html table with several nested tables within. I'm just a bit lost on how I would transpose what you just gave me into something which is as static as this. Could you help me with where to start? All the best, rad

HorseBatteryStaple

Take a look at : http://jsfiddle.net/86nBA/5/ which I put together to show a "Tree Table" type structure. Hopefully this will help you. At least you can see the basic data-source code and how to pull it in.

allan

This example is a "big dumb static html table": http://datatables.net/release-datatables/examples/api/row_details.html as well - the same principles apply - i.e. fnGetData and fnOpen .

Allan

radeonorama

I see how that example is static, but almost a little too static.

The current table i have has a header row.

Then a primary data row, and then a nested table with 'extra info'
Then another primary data row with another dested table with different 'extra info' to the first.

I'm struggling to get my head around how i would display the different 'extra info' tables for each of the primary rows.