Flexigrid is a very popular and lightweight jquery data grid plugin.jQuery Flexigrid plugin is used to convert HTML table into rich data grid with awesome features, like re-sizable columns, sorting, searching, pagination and scrolling data to match the headers. You can connect jQuery flexigrid with XML or JSON based data source using Ajax to load the content.
The main features of jQuery flexigrid are follows:
- Resizable columns
- Sortable column headers
- Ability to connect to an ajax data source (XML and JSON)
- Paging
- Show/hide columns
- Toolbar
- Search
- Single Rows Select just use { singleSelect: true } in the options
You can also check other tutorials of table grid plugin,
- jQuery jqGrid Example with JSON Data Using Rest Service
- Datatables Example with JSON Data Using Rest WebService
- Simple Example and Use of jQuery Flexigrid
- Best Free jQuery Table and Grid Plugins
Simple Example and Demo of jQuery Flexigrid
Step 1: We will create a new index.html file, Now include all js and css jQuery flexigrid library files into head section of index.html file.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/flexigrid.pack.js"></script>
Step 2: Created HTML layout and added table for jQuery flexigrid data grid into index.html file.
<table id="employees" style="display: none"></table>
The HTML table id is '#employees' which will use to render flexigrid.
Step 3: Applied jQuery flexigrid on HTML table using flexigrid() method.
$("#employees").flexigrid({
url : 'response.php',
dataType : 'json',
method: 'POST',
colModel : [ {
display : 'ID',
name : 'id',
width : 90,
sortable : true,
align : 'center'
},
{
display : 'Name',
name : 'employee_name',
width : 120,
sortable : true,
align : 'left'
},
{
display : 'Salary',
name : 'employee_salary',
width : 120,
sortable : true,
align : 'left'
},
{
display : 'Age',
name : 'employee_age',
width : 80,
sortable : true,
align : 'left'
} ],
searchitems : [
{
display : 'ID',
name : 'id'
},
{
display : 'Name',
name : 'employee_salary',
isdefault : true
}],
sortname : "iso",
sortorder : "asc",
usepager : true,
title : 'Employees',
useRp : true,
rp : 15,
showTableToggleBtn : true,
height:'auto',
striped:true,
width : 550
});
I used response.php file for json results, You can use your preferred back-end programming language but need to make sure json response would be look like below:
{
"page":"1",
"total":57,
"rows":[
{
"id":"1",
"employee_name":"Tiger Nixon",
"employee_salary":"320800",
"employee_age":"61",
"profile_image":"images\/default_profile.png"
}
.....
.....
]
}