[jQuery] Looking for a faster way

[jQuery] Looking for a faster way


(sorry, long post so I can explain the background some....)
I have a rather data intensive page that is pulling information via
Ajax, and then populating the page. I'm wondering if anyone can see a
faster way to do this, as I'm seeing 12-15 second render times, and the
page will be heavily used.
Basically, my page looks something like this (I'll post some code below):
Bob 0 0 0
Stan 1 1 0
Vacation Coding
There are many people rows (usually around 50ish), and the default veiw
has 10 columns. Each column represents a day. The number represent how
many tasks on that day, and the bit below the numbers show some summary
information about the first task on that day. A typical view will have
a task for almost every employee/day. (of course this is rather
simplified, but it's enough to show the logic issues).
Creating the initial table is more than quick enough. It's populating
the tasks where the problem comes in. The initial table has the
employee ID set as the TR id's, and each day cell has a class of the
date in question in the form "1-Jan-2007'. So, I can then just match my
task's employee ID to the row, and use the start/end date of the task to
figure out which columns to populate. (that's what the inner while loop
below is for)
Here's the code that does just this:
//Add the tasks to the schedule table
for (var x=0; x < json.results.length; x++) {
var cur = json.results[x];
var ds = new Date(cur.start_date);
var de = new Date(cur.end_date);
var curDay = new Date(ds);
//if a task spans days, we need to add it to each day
while (curDay && curDay < de) {
var lbl = curDay.getDate() + "-" +
schedule.shortMonth[curDay.getMonth()] + "-" +
curDay.getFullYear();
$(".crewSchedule tr[id='" + cur.employee_id + "'] ." + lbl)
.each( function () {
var q = parseInt($(this).children(".qty").text()) + 1;
$(this).children(".qty").text(q);
$(this).children(".detail").html(task.summary(cur));
});
curDay = new Date(curDay.setDate(curDay.getDate() + 1));
}
}
//Task.summary function builds a simple table:
summary : function (json) {
var t = "<table class=\"taskSummary\" id=\"" + json.task_id + "\">";
var l1 = json.project || json.task_name;
var l2 = json.company;
var l3 = json.location;
t += "<tr><td>" + l1 + "</td></tr>";
t += "<tr><td>" + l2 + "</td></tr>";
t += "<tr><td>" + l3 + "</td></tr>";
t += "</table>";
return t;
}
And a sample of the JSON looks like so:
{
"task_id" : "3866",
"task_name" : "TIME OFF REQUESTED",
"employee_id" : "111",
"employee" : "Smith, Bob",
"start_date" : "19 Feb 2007",
"end_date" : "24 Feb 2007",
"job_number" : "",
"company" : "",
"project" : "",
"color:" : "#99FF99",
"location" : "",
"note" : ""
}
I think the delays are resulting from the first bit of code (the for
loop through the json results), and am looking for any jQuery tricks I
might use to speed this up some. I've already got this down to only
looping once through the tasks (previous efforts required multiple
loops). Is my use of the .each() method making sense? Will that slow
things down? Any ideas how I can avoid a .each? There *should* only be
one row for the employee... hmmm.. so far - I will have multiple rows in
some special cases... But I'm ignoring that issue for now.
I'll be playing with the code in the for loop there some - I can see
ways to clean that up a little, but still would like a second opinion...
Oh, the delays are rendering times, not Ajax load times...
Any tips appreciated. Even though I know this is such a broad request
for a complex problem. I'm hoping another set of eyes my see something
I've missed.... Thanks.
Shawn