About this entry

You’re currently reading “Faster YUI DataTable with 5 Lines of Code,” an entry on Web 3.0, 6 Bladed Razors, 7 Minute Abs

Published:
12.27.07 / 6pm
Category:
JavaScript
Bookmark with delicious Bookmark with
del.icio.us
Add to Digg Add to
Digg
Post on reddit Post on
reddit
Favorite at Technorati Search on
Technorati

Faster YUI DataTable with 5 Lines of Code

  • Warning, written for: YUI 2.4.1

Holy Reflows Batman! The typical usage of a DataTable in the Yahoo User Interface JavaScript library involves passing a string into the constructor signifying the ID attribute of the container you want to attach the DataTable to. However, the YUI DataTable loves the DOM and creating nodes individually using DOM methods. Normally that'd be fine, but one of the first things it does in the constructor is create the table element and attach it to the live DOM. This is a no-no. Now, every time they append a new node (for a new row or a new cell inside of a row), it causes a reflow in the browser! What does this mean? Really bad lag when you insert 40 or 50 rows. Recognize this piece of code?

var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource);

Straight from the docs. No no no!

Instead, you should pass in an unattached DOM node instead of a string!

Try this code on for size:

var myDataTable = new YAHOO.widget.DataTable(document.createElement('div'), myColumnDefs, myDataSource);
myDataTable.subscribe('initEvent',function() {
    var d = document.getElementById('myContainer'); // CHANGE THIS -- match the id of the container you want.
    while(d.firstChild) { d.removeChild(d.firstChild); }; // remove previous DataTables
    d.appendChild(this._elContainer); });
}

Technorati Tags: , ,

Thanks for reading. If you found this article useful, and you've read through some of my previous articles, you might as well Subscribe to my content subscribe to my blog. You'll save me some bandwidth that way.