Completely Sync Controls (Sort, Search, Page, etc.) Across Two/Multiple Tables?
Completely Sync Controls (Sort, Search, Page, etc.) Across Two/Multiple Tables?
Hi All,
I've been trying to solve a problem I am having with no luck and hope I can get some help on here.
I have a single table that is being duplicated by another bit of JavaScript to allow for a responsive table design (http://www.zurb.com/playground/playground/responsive-tables/index.html) so it can be displayed on a mobile device better.
The way responsive tables works is it clones the table, then puts them side-by-side, then on the first table hides all the columns except the first one. On the second table it hides only the first column. Thereby creating two separate tables that appeared as the original, single table. However, now when you scroll left/right (most visible on a mobile device, but you can still see the effect on a desktop) the left most column is "locked" in place and only the other columns scroll. This is much like column locking in Excel.
So the problem comes down to not being able to use the Sorting, Paging or Search functions any longer, since the table has been split into two. When you apply a sort, page or search change, it is only applied to one of the two tables, and normally the "locked" table stays still/doesn't reflect the changes in the table beside it.
Is there any way to make it so the paging, sorting and searching functions are synced across two tables so the locked table will reflect row changes in the one beside it?
Allan touched on the idea on this post, http://datatables.net/forums/discussion/comment/27334#Comment_27334, but never ended up going in that direction.
Thanks,
Rob
I've been trying to solve a problem I am having with no luck and hope I can get some help on here.
I have a single table that is being duplicated by another bit of JavaScript to allow for a responsive table design (http://www.zurb.com/playground/playground/responsive-tables/index.html) so it can be displayed on a mobile device better.
The way responsive tables works is it clones the table, then puts them side-by-side, then on the first table hides all the columns except the first one. On the second table it hides only the first column. Thereby creating two separate tables that appeared as the original, single table. However, now when you scroll left/right (most visible on a mobile device, but you can still see the effect on a desktop) the left most column is "locked" in place and only the other columns scroll. This is much like column locking in Excel.
So the problem comes down to not being able to use the Sorting, Paging or Search functions any longer, since the table has been split into two. When you apply a sort, page or search change, it is only applied to one of the two tables, and normally the "locked" table stays still/doesn't reflect the changes in the table beside it.
Is there any way to make it so the paging, sorting and searching functions are synced across two tables so the locked table will reflect row changes in the one beside it?
Allan touched on the idea on this post, http://datatables.net/forums/discussion/comment/27334#Comment_27334, but never ended up going in that direction.
Thanks,
Rob
This discussion has been closed.
Replies
It is an acceptable solution.
Thanks for reading.