Ajax Updates |
| Create advanced html Tables using TableGear Posted: 24 Nov 2009 07:36 AM PST Tables are a very important part of HTML, but they can also be a pain to deal with. Using TableGear, we can create dynamic tables that you can edit "on the fly" and sort according to your needs. And all that, with almost no effort. What we’re going to do Any web developer had, one day, to work with HTML tables. Not only they were intensively used to create website structure (bad practice!), but they allow you to display tabular data, which is an important part of most websites : For example, think about a checkout page on an ecommerce site. Generally, the client order is displayed using a table. In order to save time and efforts while working with HTML tables, we are going to use an Open-Source tool called TableGear. This very handy piece of code simplify both the back end coding (getting data from the database and displaying it within a HTML table) and the front end coding (Super cool functions as such as live edition with Ajax saving) Well, enought talk for now. Let’s get our hands in code! 1. The first thing you have to do is to download your Tablegear copy on the website. Once you have it, unzip the archive. You’ll see 4 directories: * src which contains the php files 2. Now, create a file in the root of the TableGear1.5.2 directory. Let’s call it table.php. 3. Paste the following code into your table.php file: < ?php include("src/TableGear1.5.2.php"); $table = new TableGear(array( "database"=> array("username" => "USERNAME", "password" => "PASSWORD", "database" => "DATABASE", "table" => "TABLE", "key" => "PRIMARY_KEY" ), "editable" => "all", "sortable" => "all" ); ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TableGear Demo</title> <link type="text/css" rel="stylesheet" href="stylesheets/TableGear.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> < ?= $table->getTable(); ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script> <script type="text/javascript" src="javascripts/TableGear1.5.2.js"></script> < ?= $table->getJavascript(); ?> </body> </html> Don’t forget to set-up your database parameters on line 4: * username : Your DB username 4. Save the file and launch it in your web browser : Without coding a single HTML “table” line, we have all our data from the database nicely sorted within a html table. The table is also editable and sortable. Althought what we have done is very cool, TableGear can do a lot more than this. For example, it can format dates, uses textareas instead of textfields, and more. /* Columns that use selects instead of inputs. */ "selects" => array("FIELD" => "increment[min=1,range=5]"), /* Columns that use textareas instead of inputs. */ "textareas" => array("FIELD"), /* Data formats. Formats include "date", "currency", "numeric", and "memory". */ "formatting" => array("DATE" => "date", "PRICE" => "currency[prefix=$]", "MEMORY" => "memory[auto]"), /* Formats to accept as input from users. This can be a bit more complicated. * The "date" input format for example makes educated guesses about user input dates and standardizes them to * a MySQL format. Numeric will grab a full number from user input, for example 12345 from $12,345. */ "inputFormat" => array("DATE" => "date", "PRICE" => "numeric"), /* Validates user input and won't allow anything that doesn't validate. * This example will only accept a string that ends in .jpg */ "validate" => array("FILENAME" => "/\.jpg/") /* Uncomment this if you want the user to be able to delete rows. */ "allowDelete" => true, "deleteRowLabel" => array("tag" => "img", "attrib" => array("src" => "images/icons/delete.gif", "alt" => "Delete Row")) /* Uncomment this if you want to use pagination in your table. Very useful for large data sets. */ "pagination" => array( "perPage" => 5, "prev" => "Previous", "next" => "Next", "linkCount" => 4, )  Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.