Expand/Collapse Rows - Load from json on demand?

jasonwsaz

Hello Allen,

http://jsfiddle.net/jasonwsaz/s44WN/


BACKGROUND

I'm trying to implement dataTables into a Pivot Table report builder we have built. The output of the report builder is an html table that have multiple "levels" of data. Take a look at the fiddle and you'll get a general understanding of how the output should work.

This data will be generated by the server and I can either output an html table (currently how we're doing it) or I could return a json file...

So as you'll notice each "level" of the table (Facility, Department, Person) could have a variable number of elements in it. That being said, we have ran report that contain 20k+ rows of data. As you might imagine the browser simply cannot handle that much data and it takes datatables quite a while to initialize the table.

HERE IS WHAT I'M TRYING TO DO
1.) I would like to have the server generate the data in a json file and then have datatables load the table from the json file I hand down to the browser.

2.) As you'll notice each "level" has a class of ".Y1, Y2, ... , Yn". I would like the table to only initialize the Y1 values and then render the sublevels whenever the user clicks on the expand to see that data. So if someone were to click on "Y1" it would expand ONLY the Y2's directly nested beneath it. (seems like this might be similar functionality to the infinite scroll???)

3.) Each sublevel should only load the first lets say 250 items in that level. For instance, say that a certain Department has 2200 people. Only the first 250 should show, but then there needs to be some kind of a "more" button that will load an additional 250 items/people.

NICE TO HAVE
1.) Sorting, but it would have to sort based on the Y1, Y2...Yn heirarchy. so a sort ascending would need to sort each level/node independently.


Allan, can you please point me in the right direction on some of this stuff? Is it even possible to load the nested rows using json on demand?

Thanks,
Jason

allan

It is quite possible to have nested rows - in the details row, and Ajax load that data. But they are not part of the DataTable. They do not have sorting or filtering performed upon them. Sorry. it is a feature I want to develop in future, but it isn't available yet.

Allan

jasonwsaz

Can you point me in the right direction as to how to get that data to load via ajax? Do you have any examples or fiddles that you would recommend I take a look at?

Also is this something that you can do via the paid support? How long would it take to get that set up? I might be able to get a small budget if you think it would be something you could do quickly. Let me know.

Thanks!

allan

In this example, http://datatables.net/release-datatables/examples/api/row_details.html , you simply would make an Ajax call to get the data and then insert it into the returned row.

Yes this is something that I could put together an example for you with the paid support option. Easily done in an hour with time to spare.

Allan

jasonwsaz

So is there any way to get these "expanded" rows to be part of the actual table? Maybe redraw the table on each expand/collapse?

Maybe some sort of a custom solution?

allan

Currently no - there is no sense of child rows in that sense in DataTables. It is possible to achieve using the sorting options built in and filtering, but each use case is different and there is no generic solution. That is not easily done in an hour! :-)

Allan

jasonwsaz

I don't necessarily care about the sorting as much. What I'm really looking for is having the ability to have multiple nested hidden levels (number of levels is variable)... but it all appears that they are part of the table. Basically exactly as the example I sent looks, but just pulling in the data from a json file and one demand. Could you get something like that put together in an hour or so? (no sorting or searching, So, this would be what I'm trying to do.

1.) Fixed headers
2.) Fixed Left Column
3.) Everything (tr.Y2,... tr.Yn) collapsed by default and only loading the Y1 rows by default from json file
4.) When a row is expanded it grabs that rows sub rows (Y2) and inserts them in with the fixed header and columns.

If you think you can get me a sample of this working in about an hour I'll submit a support request. I appreciate your help on this!

Jason

allan

I suspect this would probably take considerably longer than an hour. As I say, nesting rows in such a manner is not a core part of DataTables, so that would need to be developed (based on the built in filtering I think). It could take anything from 4-8 hours I would think.

Allan