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.
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.
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.
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
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.
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.
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.
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.
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
A brief list of places that have good examples on the use of DataTables or similar components.