Datatable using responsive extension caching data causing issues
Datatable using responsive extension caching data causing issues
ZKeim
Posts: 8Questions: 1Answers: 0
I have a responsive datatable containing a bunch of fields in each row. These rows can be removed or added based on user actions. If I were to remove all the rows, and then later add new ones. The "new" rows are still using the data from the originals instead of the new ones. Below is my code. I am essentially clearing all of the rows from the table, and inserting new ones after each change that affects which rows should be present. I believe it's caching the data somewhere, which isn't desirable to my process. Any ideas?
this.setScrewTable?.clear();
/this.setScrewTable?.rows.add(this.SetScrews.map((SS, idx) => $(SS.getSetScrewDetailHTML(idx)))).draw();/
this.setScrewTable?.rows.add(this.SetScrews.map((SS, idx) => [
'',
SS.RotationalLocation.buildFieldWrapHTML(),
SS.Thread.buildFieldWrapHTML(),
SS.SetScrewDiameter.buildFieldWrapHTML(),
SS.SetScrewLength.buildFieldWrapHTML(),
SS.DriveType.buildFieldWrapHTML(),
SS.LockingType.buildFieldWrapHTML(),
SS.TipType.buildFieldWrapHTML(),
])).draw();
This question has an accepted answers - jump to answer
Answers
Datatables won't cache the data when using
clear(). You could try chainingdraw()tothis.setScrewTable?.clear();like this:Not sure adding
draw()there will help.Possibly
this.SetScrewscontains a cached value at the time the above code is executed. Maybe set a browsers breakpoint inside themapstatement to verify the data being added. We would need to see the problem to help debug. If you need help debugging then please post a link to a page replicating the issue so we can help debug. You can PM Allan directly with the link if you want to keep it private.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
right before the lines I put on the thread. Sorry I didn't include on the first post. Trying not to share too much.
this.SetScrews = [];
setscrews.forEach((ss) =>
{
if (!this._refConfigBase) return;
this.SetScrews.push(new SetScrewDetail(ss, this._refConfigBase as ProductConfigBase));
});
I also found through debugging, that if I destroy the table, and re-create it right away it works correctly. I would like to not have to remember that I can't trust the displayed data potentially not being correct because it used cached data instead of live data.
Here is a simple test case of what I understand you have:
https://live.datatables.net/hunasalo/1/edit
Clicking the Reload data button does show the combo of
clear()androws.add()works properly. Again to help debug we will need to see a page showing the issue so we can step through what is happening. Can you update my test case to show the issue?Kevin
based on your example, the problem might be clear. Does the rows.add method only edit the text within the cells of the rows, or can you insert entirely new HTML? My issue revolves around attributes within the html tags I'm handing it don't get updated.
rows.add()adds new rows to the Datatables data cache and whendraw()is executed the Datatable display is updated reflecting the newly added data. It does not edit any of the rows.If you are referring to using Javascript to directly insert the new table rows into the HTML this won't work. See this FAQ.
Or are you asking about using
rows.add()to add table data that contains HTML?Again a simple test case showing the issue will help us to understand the problem.
Kevin
Do you have server side processing enabled, ie (
serverSide: true)? If sorows,add()won't works as it's a client side processing API.Kevin
https://live.datatables.net/hunasalo/1/edit
The data is being built on client side.
The example isn't behaving the same exact way, but shows it doesn't do what I expected.
What are you expecting to happen?
Kevin
https://live.datatables.net/zinemuti/2/edit
it didn't save last time...I'm not too familiar with how to work with that test site. I think this one saved.....
Expectation of what would happen, if I hand the cell new html, it will render all of the html I send it, not just the text within the html. It seems to be ignoring things like attribute/class changes from before to after the update.
After clicking the reload button and inspecting the HTML I'm seeing the new values for the
grpid:I'm not sure how you are using
grpidbut it is updated in the table. I don't believe Datatables uses this attribute. What are you expecting to happen that doesn't with this attribute?I updated your test case to use classnames. You can see the color change based on the classname used when adding the new rows.
https://live.datatables.net/verevuke/1/edit
EDIT: Note I added styling to the CSS tab to facilitate the text coloring.
Possibly whatever is using
grpidneeds to know about the change?Have you inspected the page after making the updates to verify what happens? Do you see the new attributes?
Kevin
When you start editing the code the link will automatically change and save your changes. Post the new link.
Otherwise you might see a message about cloning your own copy. In this case you will need to use the
File > Cloneoption within the JS BIN web page to generate the new link. Post the new link.Kevin
After playing with your example, and then messing with my live code again. It seems the issue arose because I was only calling the draw() command upon adding rows, and not when clearing the table. It works now.
Thank you for your patience.
Interesting, the test case doesn't call
draw()after clearing the table. Maybe a behavior difference between the Datatables version you are using and the test case.In any case glad it's working now.
Kevin