TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.

Features:
* …100% XHTML compliant.
* …designed for PHP and MySQL, but can still be used on other systems.
* …built on the MooTools Javascript framework.
* …degradable for browsers without Javascript, like mobile devices.
* …quick, allowing you to be more productive.
* …customizable, giving you total control over your tables and form elements.
* …well documented, so you can learn how to use it quickly.

The TableGear package has two parts. TableGear.php is concerned with fetching data, formatting it, and getting it into an XHTML table. It also handles submitted data, both from AJAX calls and a standard POST, and returns data to the application. TableGear.js handles the client-side functions that make the tables dynamic including sorting, editing and keyboard shortcuts. These scripts can be used independently, but are designed to be used together.

Usage

Although written in PHP, the class is designed to be familiar to MooTools users. After including the source file, the constructor takes only a single options object (an associative array in PHP). This means that the most basic usage is:

include “TableGear.php”; $tg = new TableGear();

Due to the way this class handles AJAX calls, it’s important to put the constructor at the very beginning of your php document before any other data is output. If you forget to do this, the table fields will most likely not update. This will create a new instance of TableGear, but without any data in it, which is not so useful. More commonly, you will want to pass it information about your database:

$tg = new TableGear(array( "database" => array( "username" => "USERNAME", "password" => "PASSWORD", "database" => "DATABASE", "table" => "TABLE" ) ));

USERNAME, PASSWORD, and DATABASE are the minimum required parameters to be able to connect to the database. By passing a TABLE in the constructor, TableGear will fetch the data from that table automatically.

Your data is now loaded and ready to go! When you are ready to output it, simply call the getTable() method:

$tg->getTable();

That’s it! You now have a valid XHTML table that represents your data.

Making the Data Editable

By default, getTable() only outputs a table. To make the data editable, we need to pass the constructor the “editable” parameter. This will tell TableGear which fields can be changed. This parameter can be an array containing either field names (as they appear in the database) or column numbers (as they appear in the table). To make all fields editable, simply pass “all”:

$tg = new TableGear(array( "database" => array( "username" => "USERNAME", "password" => "PASSWORD", "database" => "DATABASE", "table" => "TABLE" ), "editable" => "all" ));

Changing the “editable” parameter to have even one editable field will immediately have a number of effects. First, instead of just a table, getTable() will output a form with the table inside. Second, it will output form elements (text inputs by default) inside each editable cell, and set the class to “editable”. Finally, it will add a column to the left side of the table with checkbox inputs inside. This column is for editing rows, and is for browsers that don’t have Javascript. If you don’t like the look of these boxes, don’t worry, they will be hidden when TableGear.js is applied.

Demo:http://www.andrewplummer.com/demos/tablegear/

Download:http://www.andrewplummer.com/code/download/TableGear.zip

Source:http://www.andrewplummer.com/code/tablegear/

Related Listings:

1. Create advanced html Tables using TableGear Tables are a very important part of HTML, but they...
2. JustAjax Table Script JustAjaxTable 1.9new performs all operation with tables “on-fly” using Ajax...
3. MooTools Table Plugin MooTables are created from standard html tables, they degrade nicely....
4. KeyTable – jQuery Table Plugin KeyTable is a Javascript library which provides keyboard navigation and...
5. phpMyDataGrid Table with Ajax phpMyDataGrid 2007 offers a toolkit to build a DataGrid in...

Do you like this post?

Email: