This example shows a typical implementation of jqGrid.
You can view this in example.html and example.php files included into demo package.
Click on the example link to view the result
example.html
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>
<!-- In head section we should include the style sheet for the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/sand/grid.css" />
<!-- Of course we should load the jquery library -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
// the url parameter tells from where to get the data from server
// adding ?nd='+new Date().getTime() prevent IE caching
url:'example.php?nd='+new Date().getTime(),
// datatype parameter defines the format of data returned from the server
// in this case we use a JSON data
datatype: "json",
// colNames parameter is a array in which we describe the names
// in the columns. This is the text that apper in the head of the grid.
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
// colModel array describes the model of the column.
// name is the name of the column,
// index is the name passed to the server to sort data
// note that we can pass here nubers too.
// width is the width of the column
// align is the align of the column (default is left)
// sortable defines if this column can be sorted (default true)
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
// pager parameter define that we want to use a pager bar
// in this case this must be a valid html element.
// note that the pager can have a position where you want
pager: jQuery('#pager2'),
// rowNum parameter describes how many records we want to
// view in the grid. We use this in example.php to return
// the needed data.
rowNum:10,
// rowList parameter construct a select box element in the pager
//in wich we can change the number of the visible rows
rowList:[10,20,30],
// path to mage location needed for the grid
imgpath: themes/sand/images,
// sortname sets the initial sorting column. Can be a name or number.
// this parameter is added to the url
sortname: 'id',
//viewrecords defines the view the total records from the query in the pager
//bar. The related tag is: records in xml or json definitions.
viewrecords: true,
//sets the sorting order. Default is asc. This parameter is added to the url
sortorder: "desc",
caption: "Demo",
});
});
</script>
</head>
<body>
<!-- the grid definition in html is a table tag with class 'scroll' -->
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<!-- pager definition. class scroll tels that we want to use the same theme as grid -->
<div id="pager2" class="scroll" style="text-align:center;"></div>
</body>
</html>
]]>
example.php
1222
<![CDATA[
<?php
// Include the information needed for the connection to
// MySQL data base server.
include("dbconfig.php");
//since we want to use a JSON data we should include
//encoder and decoder for JSON notation
//If you use a php >= 5 this file is not needed
include("JSON.php");
// create a JSON service
$json = new Services_JSON();
// to the url parameter are added 4 parameter
// we shuld get these parameter to construct the needed query
//
// get the requested page
$page = $_GET['page'];
// get how many rows we want to have into the grid
// rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort
// at first time sortname parameter - after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_GET['sord'];
// if we not pass at first time index use the first column for the index
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db($database) or die("Error conecting to db.");
// calculate the number of rows for the query. We need this to paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
// calculation of total pages for the query
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;
// calculate the starting position of the rows
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;
// the actual query for the grid data
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
// constructing a JSON
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
$i++;
}
// return the formated data
echo $json->encode($responce);
?>
]]>