Features :
- Resizable columns
- Resizable height and width
- Sortable column headers
- Cool theme
- Can convert an ordinary table
- Ability to connect to an ajax data source (XML and JSON[new])
- Paging
- Show/hide columns
- Toolbar (new)
- Search (new)
- Accessible API
You can download it here to use it.
There are two formats you can get your data return to your page, in JSON or XML.
Follow this link, you can find a sample source code for returning in XML format, and for returning in JSON, follow here.
How it works:
First, you have to these three lines to your html page
<link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="flexigrid/js/flexigrid.js"></script>
Please make sure that you add
<script type="text/javascript" src="jquery.js"></script> before <script type="text/javascript" src="flexigrid/js/flexigrid.js"></script> since it is using jquery to populate its grid.
then you can add the table definition which you want to show in your web page.
In this following example, the data will display in "flex1" table.
And the data will be processing in post2.php file and return to your html page in JSON format.
| <table id="flex1" style="display:none"></table> |
| <script type="text/javascript"> |
| $("#flex1").flexigrid({ |
| url: 'post2.php', |
| dataType: 'json', |
| colModel : [ |
| {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, |
| {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, |
| {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'}, |
| {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true}, |
| {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'} |
| ], |
| searchitems : [ |
| {display: 'ISO', name : 'iso'}, |
| {display: 'Name', name : 'name', isdefault: true} |
| ], |
| sortname: "iso", |
| sortorder: "asc", |
| usepager: true, |
| title: 'Countries', |
| useRp: true, |
| rp: 15, |
| showTableToggleBtn: true, |
| width: 700, |
| onSubmit: addFormData, |
| height: 200 |
| }); |
To get to the point here, please follow below steps to use Flexigrid in your webpage (in php or any languages) with MySQL or any databases.
Let's assume that you already had jquery.js in your root directory.
Step 1:
<link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="flexigrid/js/flexigrid.js"></script>
Step 2:
| <table id="flex1" style="display:none"></table> |
| <script type="text/javascript"> |
| $("#flex1").flexigrid({ |
| url: 'post2.php', |
| dataType: 'json', |
| colModel : [ |
| {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, |
| {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, |
| {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'}, |
| {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true}, |
| {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'} |
| ], |
| searchitems : [ |
| {display: 'ISO', name : 'iso'}, |
| {display: 'Name', name : 'name', isdefault: true} |
| ], |
| sortname: "iso", |
| sortorder: "asc", |
| usepager: true, |
| title: 'Countries', |
| useRp: true, |
| rp: 15, |
| showTableToggleBtn: true, |
| width: 700, |
| onSubmit: addFormData, |
| height: 200 |
| }); **if you want to use xml, just replace dataType: 'json' with datatype:'xml'. Steps 3: Create the processing page in php or any language you like. |
You can use $("#flex1").flexReload(); to reload or refresh your flexigrid. But you have to put it in right location in order to use it effectively.
And you can find full sample source codes for flexigrid at https://code.google.com/p/flexigrid/source/browse/#svn%2Ftrunk%2Fdemo
Download flexigrid directly here. or go to flexigrid.info for more detail.
Be remind yourself not to forget ; semi-colon and cases since both javascript and php are case-sensitive scripting engines.
All the best!!! Enjoy!!!
