I am having a problem with my first jqGrid implementation. The grid is rendering and loading data. Paging is working. However, the grid header is shown twice. Once as a fixed header. And also as the first row in the scroll area. I am using MySql 5.5.11 as the data source, PHP 5.3.6, jQuery 1.6.1., and JqGrid 4.0.0.
The PHP code that backends the grid looks like this:
// Processed based on the action.
switch ($lAction)
{
case "LOAD":
$page = $_POST['page']; // get the requested page
$limit = $_POST['rows']; // get how many rows we want to have into the grid
$sidx = $_POST['sidx']; // get index row - i.e. user click to sort
$sord = $_POST['sord']; // get the direction
$lDB = new DBConnection();
$lTable = "tblWebRequests";
$lGridColumns = "id,fname,lname,company,phone,email,reqfor";
$lGrid = new DBDataGrid($lDB, $lTable, $lGridColumns, 1, 5);
$response->page = $page;
$response->total = $lGrid->GetTotalPages();
$response->records = $lGrid->GetTotalItems();
$currentPageItems = $lGrid->GetCurPageItems();
for($i=0;$i<count($currentPageItems);$i++)
{
$response->rows[$i]['id']=$currentPageItems[$i]['id'];
$response->rows[$i]['cell']=array(
$currentPageItems[$i]['id'],
$currentPageItems[$i]['fname'],
$currentPageItems[$i]['lname'],
$currentPageItems[$i]['company'],
$currentPageItems[$i]['email'],
$currentPageItems[$i]['phone'],
$currentPageItems[$i]['reqfor']
);
}
echo json_encode($response);
break;
The HTML looks as follows:
<!-- Stylesheet includes. -->
<style type="text/css" media="screen">
@import url("css/main.css");
@import url("css/start/jquery-ui-1.8.13.custom.css");
@import url("css/ui.jqgrid.css");
</style>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>;
<script type="text/javascript" src="js/grid.locale-en.js"></script>;
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>;
<div class="contentwide">
<div id="databuttons">
<p></p>
<!-- end databuttons --></div>
<div id="datasection">
<table id="datatable">
</table>
<!-- end datasection --></div>
<p></p><p></p>
<div id="datapager">
<script type="text/javascript">
$('#datatable').jqGrid({
url:'php/DataGridMgr.php',
datatype: 'json',
mtype: 'POST',
colNames:['ID','First','Last','Company','Email','Phone','Request For'],
colModel:
[
{name:'id',index:'id',width:5,editable:false,hidden:true},
{name:'fname',index:'fname', width:20,editable:false,sortable:false},
{name:'lname',index:'lname', width:20,editable:false,sortable:false},
{name:'company',index:'company', width:35,editable:false,sortable:false},
{name:'email',index:'email', width:35,editable:false,sortable:false},
{name:'phone',index:'phone', width:20,editable:false,sortable:false},
{name:'reqfor',index:'reqfor', width:25,editable:false,sortable:false}
],
rowNum:5,
rowList:[],
imgpath: 'css/start/images', //alters buttons
pager: $('#datapager'),
pginput: true,
sortname: 'id',
viewrecords: true,
sortorder: "asc",
//caption:"Pending Requests",
width:945,
height:150,
onSelectRow: function(id)
{
alert(id);
}
//editurl:""
});
</script>
<!-- end datapager --></div>
I am sure I am missing something simple. I have searched to no avail for a resolution. Any help would be appreciated.
The json response should have page, total, records (count), and then only the data with NO header. It's odd to have the script within the pager div I would move it out and down. Also should add this line to the javascript: jQuery("#datatable").jqGrid('navGrid','#datapager',{edit:false,add:false,del:false});
Also I don't use PHP/MySQL (I use asp.net) but it looks like you're hardcoding the page values?
$lGrid = new DBDataGrid($lDB, $lTable, $lGridColumns, 1, 5);