Filtering a table after it has had rows added dynamically
Filtering a table after it has had rows added dynamically
gordyr
Posts: 35Questions: 0Answers: 0
I am adding rows to a table dynamically.
Rather than use the fnAddData I am using standard jquery code to append the row into the table. I am doing this because I would like a slide down animation (which I have achieved nicely by wrapping the contents in div's and sliding those down.
Everything looks great and works perfectly.
The structure of what happens is as follows:-
- User clicks "add to favourites" and information is sent via POST to server and row is added to database
- The server side script that control this is also sent up to send back some JSON about the item that has been added to favourites (profile page link, avatar, username etc)
-This data is then retrieved and appended to a "favourites" table with a lovely animation.
This gives me the result of a fully updated database, so that if the page is refreshed or the user returns at a later time their 'favourites' list is intact.
It also gives them instant feedback without a page refresh as the row is instantly appended into the table.
The problem I have is that I cannot then filter on these dynamically added rows until I refresh the page (and reload them from the database).
I am not using server side processing for this particular table as it will never have enough rows to warrant it.
My understanding of how datatables actually performs the filtering client-side is minimal at best. There must be something I am missing.
Currently as soon as I type in the text search filter, the appended row disappears.
I'm hoping Alan, fbas or someone else may be able to shed some light on why this is and also what I can do to get around this?
Many thanks
Rather than use the fnAddData I am using standard jquery code to append the row into the table. I am doing this because I would like a slide down animation (which I have achieved nicely by wrapping the contents in div's and sliding those down.
Everything looks great and works perfectly.
The structure of what happens is as follows:-
- User clicks "add to favourites" and information is sent via POST to server and row is added to database
- The server side script that control this is also sent up to send back some JSON about the item that has been added to favourites (profile page link, avatar, username etc)
-This data is then retrieved and appended to a "favourites" table with a lovely animation.
This gives me the result of a fully updated database, so that if the page is refreshed or the user returns at a later time their 'favourites' list is intact.
It also gives them instant feedback without a page refresh as the row is instantly appended into the table.
The problem I have is that I cannot then filter on these dynamically added rows until I refresh the page (and reload them from the database).
I am not using server side processing for this particular table as it will never have enough rows to warrant it.
My understanding of how datatables actually performs the filtering client-side is minimal at best. There must be something I am missing.
Currently as soon as I type in the text search filter, the appended row disappears.
I'm hoping Alan, fbas or someone else may be able to shed some light on why this is and also what I can do to get around this?
Many thanks
This discussion has been closed.
Replies
I have already found the solution.... And it was stupidly easy as is most things with datatables thanks to allan excellent design structure/API.
For anyone else who is looking to do the same thing it is simply a case of using fnAddData to pass an array of the data in the added row along with the optional 'false' parameter at the same time as appending your row manually. The 'false' parameter prevents the table from redrawing but adds the required data into memory.
Absolutely fantastic. The more I learn the more I am impressed.