Straw Dogs

Yahoo UI - New DataTable Widget

Posted by admin on February 27th, 2007 filed in javascript, php, web technologies

When I first looked at YUI when I was on the hunt for a simple yet powerful Ajax library I cast it aside in favour of Dojo. Which back then I preffered due to its tag parsing as opposed to pure JS implementation of its various widgets.

However, now I’m getting a bit more into the JS side and it doesn’t feel so daunting I decided to take another look at YUI - and I’m very glad I did. Because since my last foray into this Ajax library they’ve added some interesting new features and widgets (in beta stage).

The one I’ve found to be most useful so far has to be the DataTable. Of all the Ajax tables and grids out there that I’ve seen none come close to Yahoo’s DataTable in its speed (happy to deal with 00000’s of records), efficiency, power and functionality. Pagination, sorting, row number, infinite scrolling of data, inline editing, nested columns, row selection, data sources (accepts JSON, XML & CSV) are all very flexible allowing for an immensely powerful widget that puts Dojo’s table to shame.

After some minor niggles I managed to get my YUI DataTable up & running (with the help of Jenny and Nate at the YUI dev list). My cut down example is here in case anyone needs just another example to make something click.

This was decalred in a seperate JS file (as were all my tables) which was then included in the page.

 
var itemDataTable;
function exec_item_table(id){
var itemColumnHeaders = [
{key:“item_id”, text:“ID”, sortable:true, type:“number”},
{key:“code”, text:“Code”, sortable:true},
{key:“name”, text:“Name”, sortable:true},
{key:“description”, text:“Desc”, sortable:true},
{key:“qty”, text:“Quantity”, sortable:true},
{key:“unit_cost”, text:“Unit Cost”, sortable:true}
];
 
var itemColumnSet = new YAHOO.widget.ColumnSet(itemColumnHeaders);
 
// Point to a local or proxy URL
var itemDataSource = new YAHOO.util.DataSource(“http://localhost/bms/bms_ajax.php”);
 
// Set the responseType as TEXT
itemDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
 
// Define the data schema
itemDataSource.responseSchema = {
recordDelim: “\n“, // Record delimiter
fieldDelim: “,”, // Field delimiter
fields: [“item_id”, “code”, “name”, “description”, “qty”, “unit_cost”] // Field names
};
 
// Configure pagination features
// The following object literal reiterates default values
var initialRequest = ‘do=items&amp;id=’+ id;
var itemConfigs = {
initialRequest:initialRequest,
pageCurrent: 1, // Show page 1
rowsPerPage: 25, // Show 500 rows
startRecordIndex: 1, // Start at first Record
pageLinksLength: -1, // Show all page numbers in direct links
rowsPerPageDropdown: [10,20,50,100],
singleSelect:true
};
itemDataTable = new YAHOO.widget.DataTable(“itemContainer”, itemColumnSet, itemDataSource, itemConfigs);
itemDataTable.subscribe(“cellClickEvent”, itemDataTable.onEventSelectRow);
}

This being the PHP side which generates the CSV then echoes it out for the JS to pick it up.

 
$csv_data = ”;
$sql = “SELECT * FROM fran_invoice_items WHERE invoice_id=”.$_GET[‘id’];
$res = mysql_query($sql);
 
while($row = mysql_fetch_assoc($res)){
$csv_data .= $row[‘item_id’].“,
“.$row[‘code’].“,
“.$row[‘name’].“,
“.$row[‘description’].“,
“.$row[‘qty’].“,
“.$row[‘unit_cost’].“\n“;
}
 
//You need to trim the last "\n" otherwise the DT won’t render.
$csv_data = trim($csv_data);
echo $csv_data;

Some important points I mentioned on the mailing list are:

At the moment there’s no way of having the page numbers for the table at just the top or the bottom. They’re always at both ends. I made a feature request for this but there was a workaround offered by one of the members on the list which you can find here.
Whenever I had a column with the “key” as “id” it seemed to assume I meant the YUI generated row ID rather than the fieldname of my data field I sent using CSV. A simple name change sorted it but just a heads up if you try using “id” as a key name in your table - don’t. Give it a name like: “thing_id”.
Refreshing the table data after making an edit to the records can be done by re-instantiating the table.

Share and Enjoy: