I'm trying to create an ajax tables containing 12 columns and 2000 rows. As I've never done this before, I'm borrowing scripts from around the net and altering them to fit my needs (as I learn from example). So far, every script I have tried have been much slower than reloading the page. In fact, Safari pops up several times telling me the script is slow and I should stop trying to process it.
I'm curious if Ajax/dom tables are the best way to go with 2k+ records? If so, can someone suggest a method to speed up their usage? Right now, it'd be much faster to reload the page w/ php $_GET's.
The data in the tables is coming from a csv, which are dumped into php arrays, which then populate the dynamic table.
I need a functioning sort by column and search by column as well.
After populating the data into PHP arrays, is PHP creating the HTML for the table, or is that information being sent back to the browser and then JavaScript is adjusting the TABLE using document object model methods?
It depends on the efficiency of the JavaScript. It should be done in order, creating the table, and then making it sortable. JavaScript is slow, but it can be make faster.
That's a lot of information to be downloading anyway, so it'll take as long for the page to download the table as it will for the page to reload. If you separated into two or more requests, you could probably speed it up too.
Great wit and madness are near allied, and fine a line their bounds divide.
I know that the js is what is causing the slow downs. It must not be efficient (but I'm too new to this whole field to know), since the vanilla table itself loads very fast in php.
The first thing is that ids cannot begin with a number, so that code is invalid. That actually can be improved a bit (won't be noticed, but it is more efficient).
javascript isnt that slow, the DOM is very very slow.
there is more than one way to make a table.
using the dom ala createElement("td"), appendThis(toThat) etc is painfully slow, likely unusable for your project. especiially if you are using the html to store all your data, then sorting the table cells themselves (ouch).
building the table first in javascript (especally using arrays and not appending a string over and over) will prove much faster.
i have found that building the array of arrays, and the .joining the rows and throwing into the tbody with .innerHTML to be the fastest by far with anything bigger than ~500 cells.
to re-sort, it is faster to re-sort the array of arrays and simply throw away the old table, and .innerHTML the new one. don't try to sort html whatever you do.
.innerHTML is not standard, but i dont know of any browsers than don't support it.
EDIT - i wrote this before post #6 was posted.
that post shows code that will be basically unusably slow and memory hungry for the size of table mentioned.
I think so. Is that a bad thing? I'm borrowing the .js script as I said. Hopefully in a couple days I can write my own, but not until I can understand this one a little better.
How were you able to identify that it wouldn't be usable?
Anything that helps me learn about this process is appreciated.
based upon the shear volume of cells, i would expect it to be quite slow.
my directory listing page for instance is about 400 rows with 3 columns.
using dom methods to build the table resulted in firefox not responding for about 2-4 seconds every resort. i expect on a table much larger, as the one you describe, it would push firefox into the dreaded "Script is taking to long.." message.
after i moved over to an array of objects, resorting and drawing the table takes less than a second.
this is for several reasons. consider sorting numbers for instance.
to do this with the dom, you have to drill into the dom tree to find each cell.
then you have to turn a dom property (.innerHTML or whatever) into a js string, then into a js number.
if this were in an array of objects, it would already be the js Number you need.
see how much work that saves?
Yes, that makes sense. I'm not sure how I would go about fixing the script though. Is there a particular js function set I should read up on to become more familiar with approaching the tables as an array of objects instead of the dom method?
I'm familiar with sorting by arrays (as I actually programmed this entire thing to work in php very quickly--but the dynamic stuff was missing, hence the js), but I'm not sure if doing so in js is the same as with php.
You really wouldn't approach the table as an array of objects. You would actually create JavaScript arrays that hold the same data as the TABLE. The TABLE would merely be the display of that data. Any work on the data the TABLE displays would be done with the JavaScript arrays, then the table would update accordingly.
You really wouldn't approach the table as an array of objects. You would actually create JavaScript arrays that hold the same data as the TABLE. The TABLE would merely be the display of that data. Any work on the data the TABLE displays would be done with the JavaScript arrays, then the table would update accordingly.
arrays of objects and arrays of arrays are practically identical.
the object would use the col head as a key, whereas an array would use the col# as an index.
for instance, i parse in the incoming webDAV response into an array of object, each file getting an object like:
Code:
{name: "text1.txt", size: 432, date: new Date("123456789012"), path: "\/pub" }
a prototype method can easily convert the object into an array, i call mine vals;
Code:
ob = {name: "text1.txt", size: 432, date: new Date("123456789012"), path: "\/pub" }
ray = ob.vals() //===["text1.txt", 432, new Date("123456789012"), "\/pub" ]
i use prototype functions a lot. i would use Array.toiTable to create a HTML table from an array. it maps Array.toRow on the master's elements, and toTable from all the TRs.
its a simple matter of preference. i find object easier to code because of the meaningful names attached.
Reply With Quote
Originally Posted by mith36
Bookmarks