Non-destructive redraws?

nlaslett

I love your plug-in, but I regularly have problems with the fact that dataTables actually removes all non-visible DOM elements instead of hiding them (display: none) the way jQuery usually does. When the DOM elements are destroyed several bad things happen:

* Default form selections are lost (if, for example, you have a menu in a table cell)

* Form fields not shown don't submit because they no longer exist. (for example, checkboxes next to names in a paginated list)

How hard would it be to hide the DOM elements instead of destroying them? I imagine that would be a large rewrite, but the benefits could be huge.

Thanks,
Neil

allan

Hi Neil,

The elements are not destroyed, but rather kept in cache for future use. The retaining of the DOM elements is key to the speed of DataTables.

You are right in that changing it to use display:none would be a big rewrite, but I'm afraid I don't see any benefit over what is currently done (other than the second point - which there are ways around and the API provides for this). Personally I quite like the way DataTables does this, it keeps the DOM nice and tidy :-)

Allan

nlaslett

Thanks Allan,

I love the way dataTables works for the speed, flexibility, and power. But looking at the DOM it does appear that the hidden elements are not present. (I'm using Google Chrome's "inspect element" feature which is a great tool for tracking real-time DOM changes.) For example, if I have a table with 100 rows but am only showing 10 at a time, and I look at the DOM, there are only 10 tags present within the . If I go to the next page, the 10 tags change, but there are still only 10. Now I know you're saving all that data in JavaScript objects and the performance is excellent, but at that moment the DOM objects are indeed "destroyed" (even if the data about those objects is not).

This includes any form elements that may be inside table elements. And if form objects are not present in the DOM, they do not submit with the form. That's my problem.

Is there a way to compensate for this using the APIs? I do agree that your approach keeps the DOM very clean, and I really admire that. This is first-class work. :-)

(I'm wrong above where claim it also destroys the default menu selection; that only happens if you destroy and repopulate select options. My bad.)

Thanks!
Neil

allan

Hi Neil,

I agree that the information is removed from the DOM, however, that does not mean that the nodes are destroyed - I promise they are not :-). Using Web Inspector you can have a look at your DataTables object, and using the fnSettings object you will be able to look at the internal information in DataTables. "oTable.fnSettings().aoData[X].nTr is where the nodes are stored.

You can see this in action (that the nodes are not destroyed) in this demo: http://datatables.net/examples/example_events_pre_init.html . The event handlers are attached to the nodes in the table only once. If the nodes were destroyed then the events would not work after the table was re-drawn.

So regarding your specific problem, the issue is that the elements are removed from the DOM (and stored in Javascript). Therefore when you try to submit the form, some of the information is missing. To get around this you can use the API DataTables presents. For example: http://datatables.net/examples/example_form.html

My demo is really intended for Ajax work - but this is a fairly common question and has been asked a couple of times on the forum. So the good news is that others have a solution. If you have a look at this thread, you'll see a handy code snippet in the second last post: http://datatables.net/forums/comments.php?DiscussionID=109

Hope this helps,
Allan