Question

I have a table which dynamically reloads continually every 60 seconds. This keeps the data up to date.
I am using the script from here – http://www.michaelfretz.com/2010/04/21/using-ajax-to-load-data-from-php-into-your-website/

On the pages that have about 15 records, the Twitter Bootstrap tooltips work fine, they are speedy and look great.

On another page however I have over 400 records. Each record has a hover tooltip which shows the information from the database about that record. The information has already been outputted to the title tag but when hovering it takes more than a second before it appears which makes the whole page seem sluggish.

I’m thinking the reason for this is due to using the ‘Rel’ tag and twitter javascript which is live(Continually updating) , and therefore slows it down. But I’m not sure.

Is there any way to fix this….. or am I better to try and make a paginated table which loads the next page each time I click Next?

Answer 1

400 Records! Too much!

This is something seriously to do with the browser and system’s performance. Displaying 400 records with live() is kinda crazy. The browser will crash for sure. Instead you can do one thing. Use pagination and display only a small sub set. Also, the users will find it difficult to navigate and search.

One another way is to use datatables. Load the full content in table and don’t worry about anything. Datatables will take care of the rest. Pagination and Search are good features in this.

Screenshot of Datatables:

_{(source: webresourcesdepot.com)}

If you see this, everything from Searching, Sorting, giving tooltips are done in the client side, with minimal set of data. So the payload on the browser will be less and the users see the part, which they just require.