Question

I am very new to Javascript and Jquery, so my apologies for this beginner’s question.

In a simple ajax web app, I am creating an HTML page which is mainly a big table. Each row in this table describes an event (party, show, etc). My page not only displays this information but is meant to let the user do a bunch of things with it, in particular to dynamically search and filter the table according to a variety of criteria.

First an abstract beginner’s question: in this broad kind of situation (by which I mean that you want your javascript code to run a bunch of operations on the information you retrieve from the webserver) would you use the DOM as a data structure? The ease with which one can search and manipulate it (using Jquery) makes that a possibility. (E.g., “find me table rows describing an event with date column = 2010-01-01 and event type column = ‘private party’.) Or would you keep the same information in a traditional Javascript data structure, search/filter/operate on that using plain javascript code and then update the DOM accordingly to display the results to the user?

(As a newbie, I imagine the first, DOM-only approach to be slower while the latter to be take up a good deal of memory. Right? Wrong?)

Assuming the second strategy is reasonable (is it?), then a practical question: can I simply store in my Javascript objects a pointer to the corresponding Jquery object? Eg, can I do

var events = new Array();
// ....
var event3094 = new Event('party','2010-01-01' /*, ... */);
event3094.domElement = $("#correctIdOfTheEventRowInMyTable");

events.push(event3094)

Does this store just a reference (pointer?) to the Jquery object in each Event object or is it creating a new copy of the Jquery object?

I am just wondering “how the pros” do it. : )

Thank you for any advice and insight.

cheers

lara

Answer 1

There are so many ways to do this, but DOM manipulation will almost always be slower than JS manipulation.

To answer your question, anytime you use $(selector) a new jQuery object is created and a match to find the element is performed.

I would recommend two approaches:

FIRST OPTION

1. Load data in a normal HTML table
2. Read through the rows, and store just the data (each cell’s contents) in an array similar to your code example.
3. Store a reference to the tr in that object.
4. Then you can process filter, etc, and only apply changes and searches to the DOM as needed.

SECOND OPTION

1. Load the page without the table
2. Load the data as JSON from the server, and generate a table from the data
3. Store reference to the tr element

Basically, you don’t want to perform a $(selector) a 1000 times. The concept is something like this:

var $rows = $("table tr");

// ...

event.domElement = $rows[0]; // Stores reference to existing DOM node, not a new jQuery object.

Then when you need to use jQuery methods on the object, you could use $(yourEvent.domElement) to wrap it in a jQuery wrapper.