Examples using the Yahoo User Interface components (YUI)
DataTable
Server driven DataTable with pagination and sorting.
This example builds a DataTable based on the columns information taken from the server. Instead of building a statically defined DataTable it will build it based on what the server says.
It has been based on the server-side pagination and server-side sorting examples. They have both been changed in that they do not use the DataSource to communicate with the server but use a plain Connection Manager request to fetch the information and then pass it as a local source to the DataSource. This allows full access to all the information received from the server before it gets sent to the DataTable. Reported bugs on both examples have been fixed as well.
The source files for this sample are available for download in a zip file. The PHP server script requires an active PHP interpreter. The YUI compoments are fetched from the YUI site.
New for 2.5.1
The examples have been completely redone for this release. Server-side paging has been fully revamped. All the extra code required to do server-side paging around the DataTable is now completely gone since most is handled directly from within the DataTable. Now it only requires a few settings, some function overrides and little more.
The most noticeable change for the user is the page links, which are now provided by the DataTable itself, with the same features as for client-side paging and can be customized just as well.
Server-side sorting, though, is not really well integrated into the DataTable yet so that part is not so clean.
Data Grid
The DataTable is basically meant to represent data structured as in a regular database table. As such, it has a definition for each of the columns which applies to all rows in the table. Unless the designer provides customized code, every cell in the same column will behave the same.
This example uses an extra invisible column to provide data type definitions for each individual cell so that instead of a single definition applicable to all the cells in a column, each cell has its own definition. For the purpose of the example, this definition is only a string indicating whether the cell contains a number, text or date, nevertheless, in a real case there is no reason why it cannot be a complex object describing several attributes.
All columns have a custom formatter and editor function. These do not actually do any formatting or editing but they check the corresponding data type information stored in the extra column paired to the one being actually formatted or edited and then calls the standard formatters and editors provided for along the DataTable component
The example is fully contained in the HTML file, its only external resources are the YUI component files which are downloaded from the YUI download site.
New for 2.5.1
No changes where required for this version
DataTable with extra details in tabbed pop-up
This example draws a very basic DataTable and on clicking on any cell, a YUI Panel will pop-up containing a YUI TabView with four tabs. Each tab has a child DataTable with different contents, all related to the clicked record. The contents in the cells of these child tables is generated dynamically and it reflects the base table row number and tab numbers active plus the row and column position of the cell.
In order to make the example totally self-contained, the data on all the tables is created locally. In an actual application the data would come from data servers. Besides changing the columns and field definitions to match the actual data, to make this example work in client-server environments the single argument to the constructors of all the new DataSources would need to be changed to the URL of the servers providing the data.
New for 2.5.1
This example uses method
sendRequest
of the DataSource to retrieve new data for the child tables. It has been modified to accept the arguments in the new format.
The new version has provided backward-compatibility so it would have worked just the same the way it was.
Invoice: drag and drop, summary row and field validation
This example allows you to do an invoice by dragging items out of a DataTable with a list of items into another DataTable. It has in-line cell editing with an editor with a regular expression validator. The invoice uses the TFOOT element of the table to do the totals
New for 2.5.1
There are only two changes for this version.
Method getTableEl does not exist anymore so it has been replaced by a way around.
Also, the inline style definition for className number had to be replaced due to the new
'liner' element in between the HTML cell and the actual content.
Since now the headers are a separate table from the body of the DataTable the column widths are now calculated by the DataTable on each refresh. The footer is not included in this calculation since the DataTable ignores it exists. When first loaded, the right-hand table is empty and the footer with the totals does not match the headers (the titles in grey to the left don't end where they should). As soon as an item is dropped into the invoice, the borders align fine.
Fixed: Also, if you enter a large quantity on any of the items so that the totals
grow wide, the headers and the table won't match any longer.
Finally, there must be some padding or margin in the 'liner' element so that
the totals are not aligned with the item prices. This I should be able to fix ASAP.
The overflowing totals with large quantities was fixed by calling method _syncColWidths
after the values are recalculated. Though the DataTable does not know about the tfoot element,
the tbody of the table does adjust its width to it so _syncColWidths is able to adjust
the headers to it. This was a tip by Jenny Han Donnelly, thanks.
I often discourage the use of private methods and properties (those signaled by a leading underscore)
since they are unsupported. In this case, tfoot elements are also unsupported so this whole example
may break at any moment.
Also, the alignment issue was solved by adding the same padding to the extra cells
as the liner element has in the body of the table.
Show and hide columns in a DataTable
This example uses the new Selector component to hide and show columns in a DataTable with only two lines of code.
It uses the same server script as the Server driven DataTable example above.
New for 2.5.1
Showing and hiding columns is now a feature of the DataTable itself so there is no need to do any tricks with CSS styls and the Selector component.
Handling of active cell content
This example show an assortment of HTML controls: radio buttons, checkboxes, dropdowns, regular and image buttons and an in-line textbox and how to handle them.
New for 2.5.1
Not much new, simply using the getTdLinerEl method to reach the cell value container.
Delete Rows By
Here, the DataTable is extended with a function deleteRowsBy analogous to
function getChildrenBy in YAHOO.util.Dom, where you provide a function
that will return a Boolean indicating whether the record is to be deleted or not.
This function receives an object with all the values of each record to decide
TreeView with DataTables as leafs
The example builds a couple of random trees. It will show a DataTable at the end of each branch.
In the first tree, several branches can be open at the same time so it builds a DataTable for each.
In the second tree, only one branch will be open at a time so it uses just one DataTable for all of them and just moves it around. It also uses a single DataSource with caching enabled so that if a node is visited again the data can be read from the cache.
Send JSON data as POST to PHP
This is a working example of how you can send JSON data via a POST request with Connection Manager's asyncRequest method, and how to read it on the PHP side.
Articles
Working with the YUI DataTable Control
After using the DataTable for a while and answering questions from fellow users about it I realized I could help a little bit by putting together all I had learned in the process so I wrote a big article which Eric Miraglia very kindly refused, and right he was on doing so! After clearing up my ideas I realized there were about four separate articles that could be written. The first two were then accepted for publication by Eric at the YUI blog site after some editing which he very kindly handled.
A PHP back end to YUI
Some of the material in the article I originally prepared for publication at the YUI blog had no JavaScript at all, it was pure PHP so here it is with some extra PHP thrown in.
This article contains the code that would be the back-end to the code in the other two articles or, for that matter, in any AJAX application or, perhaps, it should be AJAJ since it uses JSON and not XML.
It also contains the code for my BuildSql function which is a sort of sprintf oriented towards SQL so that you write your SQL statement with placeholders and then the function takes care of inserting the rest of the arguments into the template with the proper format, quoting and escaping.
Making your own DataTable
YUI's DataTable component has many options so that it can be used in all sorts of applications and environments. Any single user, though, uses just a few of them. It is a good idea to encapsulate those few options in a single place so that even if at some point you decide to make a change, it will be propagated to all places at once.
Whatever options the server provides will probably determine how we communicate with it. The nature of our application will define the types of data we handle. The looks and behavior of our site will fix some more options. Finally, we may desperately need some patch and can't wait for the next release. These are options that we may cast into our own DataTable, inherited from YUI DataTable
External links
A brief list of places that have good examples on the use of DataTables or similar components.
- Drag and drop in a YUI DataTable
- A non-YUI table with tree-like expansion of records
- Other non-YUI controls for tabular data or grids
Component Dependencies Calculator
A utility to figure out what needs to be included when you are loading several components at once.
It uses the YUI Loader to find out what you need and in which order