Cloning tables - creating multiple tables that share data
Cloning tables - creating multiple tables that share data
airandfingers
Posts: 30Questions: 0Answers: 0
I'm looking to create two tables that will have exactly the same data in them, but which will be formatted very differently.
How they'll be the same:
*They'll use the same data set (which is constantly being updated and added to)
*They'll both group rows in expandable groups based on their value in one column, as shown at http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html
How they'll be different:
*One will display all columns (except the grouping column, which will be displayed as row groups), while the other will only display two (of the eight) columns.
Is there any way to do this in DataTables without duplicating all the calls I make to initialize one table?
Many thanks,
Aaron
How they'll be the same:
*They'll use the same data set (which is constantly being updated and added to)
*They'll both group rows in expandable groups based on their value in one column, as shown at http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html
How they'll be different:
*One will display all columns (except the grouping column, which will be displayed as row groups), while the other will only display two (of the eight) columns.
Is there any way to do this in DataTables without duplicating all the calls I make to initialize one table?
Many thanks,
Aaron
This discussion has been closed.
Replies
Good question! I'm afraid the answer is that at the moment that a DataTable will maintain its own data source independently of any other table, so there isn't a way of directly linking the two together using the same data store on the client-side. This in fact would be the goal for the DataTables project ultimately to separate the data store from the display interface, making this kind of thing possible - but that's going to be a lot of work :-).
So for the moment, although its not a trivial initialisation option, it is possible to do it, but the exact answer will depend a little on how you are using the table. For example are they client-side processing or server-side? If client-side, then what you can do is when the initialisation of the first table is completed you could call fnGetData() on the first table and use the returned array as the source for the second table (i.e. pass the array in as aaData). If however its server-side processing then what you would want to do is in fnDrawCallback for the first table, call this.fnGetData() and then use fnClearTable() and fnAddData() on the second table to populate the second table with the same information as the first.
Are you planning to link the interactions of each table with the other? For example if you filter in table 1 should that be applied to table 2? If so, you might be interested in this plug-in: http://datatables.net/plug-ins/api#fnFilterAll .
Regards,
Allan
Separating the data store from the interface sounds like a great goal, lofty though it may be. I'm actually storing all the data that I'm putting into my DataTables, keeping everything in client-side objects that exist in parallel to the tables that represent them.
As for fnFilterAll, thanks for pointing that out. However, my tables differ significantly from each other, and it looks like fnFilterAll takes a simple int argument to indicate which column to filter on. Instead, can you think of a way that I could filter on all columns with a given class/type/aoColumns setting?
For example, one of our tables lists devices by ID, and another lists connections by pairs of device IDs. If I was to do global sorting, it'd be to filter for rows whose ID fields match some search string. I've already identified which columns are IDs (within my own code), but while I could pass this in as each column's sClass, I don't see any way to tell DataTables to filter based on sClass.
Could you explain what aspect of them you want to be synchronised? Is it that each table shows information about the same basic item, but just shows different information about that item? So if you had rows x,y,z on table 1 you would also be showing rows x,y,z in table 2, but with different column information? Thus paging, filtering and sorting would be synced?
Do you want the table controls to work on both tables (like paging etc)? What I'm thinking is that it would be possible to have a master table with all of the information required and then populate the second table in fnDrawCallback with fnGetData. So the second table would only show the details (this is actually reasonably easy to do - the tricky part comes if you want the table controls to work on the second table as well - but it is totally possible :-) ).
Allan
[quote]Could you explain what aspect of them you want to be synchronised?[/quote]
I only wanted the data to be synchronized, so that I would only have to modify the data (through fnAddData, fnDeleteRow, fnUpdate) once per change.
I didn't really mean synchronizing paging, filtering, and sorting, though each of those might be useful. I did, however, want to synchronize the collapsing/expanding of row groupings (http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html), though I don't see an option that sets a handler for this event.
Anyway, this discussion of synchronized tables is a moot point for now - my colleague has already implemented the would-be-table with fewer columns as a simple tree (http://bassistance.de/jquery-plugins/jquery-plugin-treeview/). Now, the only synchronization that would really make sense is synchronizing collapsing/expanding, as discussed above.
I would, however, still like a response to my questions about fnFilterAll, as this kind of universal filtering would be a really cool feature.
[quote]As for fnFilterAll, thanks for pointing that out. However, my tables differ significantly from each other, and it looks like fnFilterAll takes a simple int argument to indicate which column to filter on. Instead, can you think of a way that I could filter on all columns with a given class/type/aoColumns setting?
For example, one of our tables lists devices by ID, and another lists connections by pairs of device IDs. If I was to do global sorting, it'd be to filter for rows whose ID fields match some search string. I've already identified which columns are IDs (within my own code), but while I could pass this in as each column's sClass, I don't see any way to tell DataTables to filter based on sClass.[/quote]
Thanks!
Aaron
The row grouping plug-in for DataTables is a 3rd party plug-in, rather than part of the core and I'm not completely familiar with it I'm afraid. However, I would imagine that it should be possible to modify the source slightly to provide a callback (it looks like there is "fnOnGrouped" which is a callback that is fired when the grouping occurs which might be useful). I can take a look at creating an example if you like that does this. However, is the synchronisation you need now with Treeview rather than DataTables? Have you integrated Treeview with DataTables?
> Instead, can you think of a way that I could filter on all columns with a given class/type/aoColumns setting?
Sorry I missed this question! What I would suggest, rather than using fnFilterAll is to create your own custom filter which is applied to each row on both tables. This can be done by making use of the fact that custom filtering using afnFiltering ( http://datatables.net/development/filtering#row_filters ) is applied to all tables on a given page.
I've put together an example which will filter both tables on the page by the class name of the TR elements in the row, the filtering for which is triggered by the 'select' list at the top of the page. You can see the example here: http://live.datatables.net/oyinin/3/edit (click on the "render" button to see it in action).
Hope that helps!
Regards,
Allan