This example demostrates the set methods in grid. The set methods in most cases
are combined with .trigger('relodGrid')
Set new url
Set Sort to amount column
Set Sort new Order
Set to view second Page
Set new Number of Rows(15)
Set Data Type from json to xml
Set new Caption
Sort by Client
HTML
<![CDATA[
...
<table id="list7" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager7" class="scroll" style="text-align:center;"></div>
<br />
<a href="javascript:void(0)" id="s1">Set new url</a>
<br />
<a href="javascript:void(0)" id="s2">Set Sort to amount column</a>
<br />
<a href="javascript:void(0)" id="s3" >Set Sort new Order</a>
<br />
<a href="javascript:void(0)" id="s4">Set to view second Page</a>
<br />
<a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a>
<br />
<a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
]]>
Java Scrpt code
<![CDATA[
...
jQuery("#list7").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', 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}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#pager7'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Set Methods Example",
hidegrid: false,
height: 210
});
jQuery("#list7").navGrid('#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
jQuery("#s1").click( function() {
jQuery("#list7").setGridParam({url:"server.php?q=2"}).trigger("reloadGrid")
});
jQuery("#s2").click( function() {
jQuery("#list7").setGridParam({sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");
});
jQuery("#s3").click( function() {
var so = jQuery("#list7").getGridParam('sortorder');
so = so=="asc"?"desc":"asc";
jQuery("#list7").setGridParam({sortorder:so}).trigger("reloadGrid");
});
jQuery("#s4").click( function() {
jQuery("#list7").setGridParam({page:2}).trigger("reloadGrid");
});
jQuery("#s5").click( function() {
jQuery("#list7").setGridParam({rowNum:15}).trigger("reloadGrid");
});
jQuery("#s6").click( function() {
jQuery("#list7").setGridParam({url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");
});
jQuery("#s7").click( function() {
jQuery("#list7").setCaption("New Caption");
});
jQuery("#s8").click( function() {
jQuery("#list7").sortGrid("name",false);
});
]]>
PHP with MySQL
<![CDATA[
...
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
$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'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$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());
$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++;
}
echo json_encode($responce);
...
]]>