Sortable Table
To illustrate the power of Ajax in class one of the simplest and most striking examples is the progressive enhancement html datagrid. The yahoo user interface or YUI is a set of javascript widgets that you can incorporate into your page to instantly add functrionality such as drag and drop, dropdown menus, sortable and editable tables, layout, styled message boxes and much more. The focus of this article is a simple html table example. Let’s start with the following code which should produce a table that is your standard 1995 style html table.
The Code:
<html>
<head>
<title>Progressive YUI grid – step by step</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Some Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>34</td>
</tr>
<tr>
<td>76</td>
</tr>
<tr>
<td>98</td>
</tr>
</tr>
</tbody>
</table>
</body>
</html>
The Outcome:
| Some Value |
|---|
| 23 |
| 34 |
| 76 |
| 98 |
That’s all great, but you may want to offer sorting, movable columns, and a generally more appealing user interface for your tables. The first step to our table’s transformation is to add the links to the YUI scripts that will transform your table. Place the following into your tags.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/datatable/assets/skins/sam/datatable.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"></script>
The files above will transform your page by applying the CSS classes to the table and applying the Javascript that will give the table the ability to react to your mouse clicks. Now you might be wondering how get the links that you need and more importantly what order should they be put in. To answer that question you can go to http://developer.yahoo.com/yui/articles/hosting/ and click on the buttons corresponding to the widget that you want to use in your page, finally copying the code into the clipboard and pasting into your page.
Next you have to add the yui-skin-sam class to the tag in your page.
<body class="yui-skin-sam">
Now enclose the table in a div tag like the code below and give your table an id.
<div id="markup"> <table id="sometable"> <thead> <tr> <th>Some Value</th> </tr> </thead> <tbody> <tr> <td>23</td> </tr> <tr> <td>34</td> </tr> <tr> <td>76</td> </tr> <tr> <td>98</td> </tr> </tbody> </table> </div>
Now under the closing div tag place the following script which will be explained after the code snippet.
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.EnhanceFromMarkup = function() {
var myColumnDefs = [
{key:"somevalue",label:"Something",sortable:true}
];
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("sometable"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [{key:"somevalue"}]
};
var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource,
{caption:"This is some caption",
sortedBy:{key:"due",dir:"asc"}}
);
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});
</script>
Notice that ==> var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get(“sometable”)); points to the id of the table. That is your datasource.
Now look at following and notice that markup is the name of the div that surrounds your table, this is where your new datatable will be drawn.
var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource,
{caption:"This is some caption",
sortedBy:{key:"due",dir:"asc"}}
);
Finally, here is the code for the simple example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My First YUI Table</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/datatable/assets/skins/sam/datatable.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datatable/datatable-min.js"></script>
</head>
<body class="yui-skin-sam" >
<div id="markup">
<table id="sometable">
<thead>
<tr>
<th>Some Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>34</td>
</tr>
<tr>
<td>76</td>
</tr>
<tr>
<td>98</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.EnhanceFromMarkup = function() {
var myColumnDefs = [
{key:"somevalue",label:"Something",sortable:true}
];
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("sometable"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [{key:"somevalue"}]
};
var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource,
{caption:"This is some caption",
sortedBy:{key:"due",dir:"asc"}}
);
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});
</script>
</body>
</html>
