Although TableGear can be applied to any static table, it is primarily concerned with quickly and easily updating the data itself, specifically that inside a database table. To add this functionality, we will have to start working with TableGear.php:
<?php include "TableGear.php"; $tg = new TableGear(array( "database" => array( "username" => "USERNAME", "password" => "PASSWORD", "name" => "DATABASE", "table" => "TABLE" ), "editable" => "all", "sortable" => "all" ); $tg->getTable(); ?> <script type="text/javascript" src="MooTools.js"></script> <script type="text/javascript" src="TableGear.js"></script> <script type="text/javascript"> new TableGear("tgTable"); </script>
Let's look at this code line by line. We first need to include the TableGear source code:
include "TableGear.php";
After this, we create a new instance of TableGear, passing an array of options to the constructor:
$tg = new TableGear(array(
Inside this array, we need the database option to start working with the database:
"database" => array(
At minimum, we will need a USERNAME, PASSWORD, DATABASE, and TABLE to be able to access our data. Adding the TABLE parameter will make TableGear automatically fetch our data from the table:
"username" => "USERNAME", "password" => "PASSWORD", "name" => "DATABASE", "table" => "TABLE"
We have now passed our database information, but in order to make the table editable, we have to tell TableGear which columns can be edited. We could pass an array of the field names as they appear in the database or the column numbers as they appear in the table, but since we want every column to be editable, we will just say all:
"editable" => "all"
In addition, we still want our columns to be sortable as in the last example. Again, we could pass an array of names or numbers, but for the example we will just make them all sortable:
"sortable" => "all"
Once the data is loaded, we can fetch our table by using the method getTable(). Here, we're assuming that we're already inside the HTML of the page, but actually we can make the constructor anywhere earlier and call the getTable() method after that:
$tg->getTable();
Now we have our table! All we have left to do is add TableGear.js. We start by linking to the source files:
<script type="text/javascript" src="MooTools.js"></script> <script type="text/javascript" src="TableGear.js"></script>
And finally create a new TableGear instance in Javascript. Since we didn't specify an id for the table, TableGear.php sets it to tgTable by default, so we pass it that:
new TableGear("tgTable");
That's it! You now have a sortable, editable table that updates the database as it goes.
This is the most basic example that all other functionality in TableGear builds upon. Note that in later examples, only the PHP constructor and special methods will be shown, but to get the code working you will still need the include and getTable() statements, link to the source files, and call the Javascript constructor.