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.
### Server side
Coming...
## CRUD Actions
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
### Delete
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);
### Add
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.
## Responsive
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.