I have create a simple grid that retrieves data from a server through php. The number of rows in MYSQL database are 9.
I decide to change the rowNum option from rowNum:10 to rowNum:7 and see what will happen. As i expected 7 rows appeared on grid. The problem is that i can not see the rest 2. The pager bar hasn’t got a second page (Page 1 of 1 it says).
Then i add the recordtext option and set it to this recordtext: ‘{0} – {1} of {2}’.
Refresh the page and in the right down corner of the grid this text apeard “1 – 7 of 9”. That means that all of the data returned from the server but something going bad with pagination.
Let me post the code.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script type="text/javascript">
$(function(){
mygrid = $("#list");
mygrid.jqGrid({
url:'example1.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right', search:true , stype:'select', searchoptions:{value:':All;8:8.00;6:6.00'}},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right', sortable:true},
{name:'note', index:'note', width:150, search:true , align:'center'}
],
pager: '#pager',
emptyrecords: "Nothing to display",
recordtext: '{0} - {1} of {2}',
rowNum:7,
rowList:[7,9,11],
viewrecords: true,
caption: 'My first grid'
});
//Search button
$("#bsdata").click(function(){ mygrid.jqGrid('searchGrid', {sopt:['eq'],top:300,caption:"test searching"} ); });
// Search toolbar.
mygrid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "eq"});
//NavBar
mygrid.jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
});
</script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
<input type="BUTTON" id="bsdata" value="Search" />
</body>
</html>
and example1.php
<?php
$page = 1; // $_GET['page']; // get the requested page
$limit = 9; //$_GET['rows']; // get how many rows we want to have into the grid
$sidx = 'invid';//$_GET['sidx']; // get index row - i.e. user click to sort
$sord = 'invid';//$_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
//array to translate the search type
$ops = array(
'eq'=>'=', //equal
'ne'=>'<>',//not equal
'lt'=>'<', //less than
'le'=>'<=',//less than or equal
'gt'=>'>', //greater than
'ge'=>'>=',//greater than or equal
'bw'=>'LIKE', //begins with
'bn'=>'NOT LIKE', //doesn't begin with
'in'=>'LIKE', //is in
'ni'=>'NOT LIKE', //is not in
'ew'=>'LIKE', //ends with
'en'=>'NOT LIKE', //doesn't end with
'cn'=>'LIKE', // contains
'nc'=>'NOT LIKE' //doesn't contain
);
function getWhereClause($col, $oper, $val){
global $ops;
if($oper == 'bw' || $oper == 'bn') $val .= '%';
if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val;
if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%';
return " WHERE $col {$ops[$oper]} '$val' ";
}
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
$where = getWhereClause($searchField,$searchOper,$searchString);
}
// connect to the database
$dbhost = "localhost";
$dbuser = "user";
$dbpassword = "user123";
$database = "test";
$tablename = "invheader";
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
//mysql_set_charset('utf8',$database);
mysql_query("SET NAMES 'utf8'");
$result = mysql_query("SELECT COUNT(*) AS count FROM $tablename");
$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 invid, invdate, amount, tax, total, note FROM $tablename ".$where." ORDER BY $sidx, $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8"); } else {
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo "<row id='". $row['invid']."'>";
echo "<cell>". $row['invid']."</cell>";
echo "<cell>". $row['invdate']."</cell>";
echo "<cell>". $row['amount']."</cell>";
echo "<cell>". $row['tax']."</cell>";
echo "<cell>". $row['total']."</cell>";
echo "<cell><![CDATA[". $row['note']."]]></cell>";
echo "</row>";
}
echo "</rows>";
?>
Additionally tried to use this method but also nothing changed.
Any idea ? Can you give me some hints ?
Thanks in advance.
So. The mistake was due to a noobish coding.
As you can see in the top of php file i have this
$page = 1; // $_GET[‘page’]; // get the requested page
$limit = 9; //$_GET[‘rows’]; // get how many rows we want to have into the grid
While the html file send rowNum: 7 in the php this number became 9 and that’s why it was saying Page 1 of 1.
To solve the problem i just had to erase comments and use the $_GET method.
Also i change what Oleg said.