This example shows how to use EditableGrid with a MySQL database
First, create a database and load the script demo.sql
shell> mysql -u root -ppassword
mysql> create database demo; use demo; source demo.sql
Then copy config.php.sample to config.php and edit the values with yours.
$config = array(
"db_name" => "",
"db_user" => "",
"db_password" => "",
"db_host" => "localhost"
);
You can load index.html in a browser and you should see the content of the table demo.
##Load data EditableGrid supports two types of data : JSON and XML. In this example, we use JSON :
$grid->renderJSON($result);
But this works too :
$grid->renderXML($result);
Be careful to use the appropriate function in the Javascript. JSON :
DatabaseGrid.prototype.fetchGrid = function() {
// call a PHP script to get the data
this.editableGrid.loadJSON("loaddata.php?db_tablename=demo");
};
XML :
DatabaseGrid.prototype.fetchGrid = function() {
// call a PHP script to get the data
this.editableGrid.loadXML("loaddata.php?db_tablename=demo");
};
It's very easy to filter the content of the table. You can use
EditableGrid.prototype.filter = function(filterString, cols)
In this example, the filter operates on all columns
datagrid.editableGrid.filter( $(this).val());
but you can filter only on some columns. Below, the filter operates on columns 0, 3 and 5.
datagrid.editableGrid.filter( $(this).val(), [0,3,5]);
Coming...
Step to add a paginator
-
Add a div to render the paginator
<!-- Paginator control --> <div id="paginator"></div> -
In the constructor, define the pageSize and call the method that renders the paginator, once the table is rendererd.
// define the number of row visible by page pageSize: 10, // Once the table is displayed, we update the paginator state tableRendered: function() { updatePaginator(this); }, -
The method updatePaginator builds and renders the paginator.
Coming...
A column action (type HTML) has been added. With a renderer, the content is redefined to add icons or any components to manage actions on the row
The delete fonction calls delete.php with the tablename and the row id. The script executes the query that deletes the row and returns a status. If it's ok, we remove the row from the javascript model :
if (response == "ok" )
self.editableGrid.removeRow(id);
By clicking on the add button, a form is shown to enter a name and a firstname. Data are sent to add.php that executes the insert query and returns the status of the operation.
This example uses the first technique describes here http://elvery.net/demo/responsive-tables/. This technique is very simple, it hide less important columns on smaller screen sizes.