Looking for help on dynamic table updates
Looking for help on dynamic table updates
Hi All,
I have a datatable that is created after the table's html has been dynamically added to the page once the rest of the page content has been loaded. This works fine. However, I have 2 other use cases I'm trying to solve:
1. If a page filter is changed, get a fresh copy of the data using an AJAX call, blow away the entire table, recreate the table's html, add it to the page, and then re-apply the datatable plugin. I haven't been able to get this to work.
2. On a periodic basis, use an AJAX call to get a fresh set of data. For rows that are not in the fresh data set remove them. For rows that are in the fresh data set but not in the table, add the entire row. For rows that are in both the table and the fresh data set, update any cells which have changed data. I have ID's on everything so I can match them up on a row or row/column basis.
If anyone has any pointers or links to examples of something like I'm trying to do I'd appreciate it very much,
Thanks in advance,
Jim
I have a datatable that is created after the table's html has been dynamically added to the page once the rest of the page content has been loaded. This works fine. However, I have 2 other use cases I'm trying to solve:
1. If a page filter is changed, get a fresh copy of the data using an AJAX call, blow away the entire table, recreate the table's html, add it to the page, and then re-apply the datatable plugin. I haven't been able to get this to work.
2. On a periodic basis, use an AJAX call to get a fresh set of data. For rows that are not in the fresh data set remove them. For rows that are in the fresh data set but not in the table, add the entire row. For rows that are in both the table and the fresh data set, update any cells which have changed data. I have ID's on everything so I can match them up on a row or row/column basis.
If anyone has any pointers or links to examples of something like I'm trying to do I'd appreciate it very much,
Thanks in advance,
Jim
This discussion has been closed.
Replies
If you just wanted to replace the data in the table you can use fnClearTable and fnAddData to empty the table and fill it up again without having to create an entirely new table.
If you do really want to remove the entire table from the dom and reinsert it you should call fnDestroy on the grid before you remove it, otherwise you will probably have stuff left behind (which I assume is the case given that you didn't say what troubles you were having with it).
As for 2 you should probably take a look at fnUpdate, fnAddRow and fnDeleteRow. Though personally I'd suggest that when you get the ajax request with updated values you just empty the table, add everything back in and adjust the scroll position to what it used to be (I haven't tried this, but I'm going to in the future).
Thanks for the reply. In this case the table is full of small horizontal bar graphs which will be updated every couple of seconds or so. I think redrawing the whole table will not be usable for this particular use case, hence wanting to update just the cells with changed data. For #1 I'll give your suggestions a try.
Thanks,
Jim