The jqgrid is showing correctly the total no of records and also the page no but not moving to next page. On clicking next page it shows loading but remains on the same page. I have seen many previous post related to this but did not get any solutions.I have tried #pager but it is also not working. Actually i am not able to understand how this jqgrid actually works.The image below shows the jqgrid with the all the records and page but not moving to next page.
Here is my code.
<?php require_once 'templates/header.php';?>
<link rel="stylesheet" href="css/jquery-ui-custom.css"/>
<link rel="stylesheet" href="css/ui.jqgrid.css"/>
<style>
.ui-widget{font-family:Arial; color:#fff;}
.ui-jqgrid .ui-jqgrid-hdiv {height:25px;}
.ui-jqgrid .ui-jqgrid-pager {height:40px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: #fff !important;font-weight: bold;color:#000;font-size:13px;;}
.ui-widget-content{border: 1px solid #ddd !important;}
.ui-jqgrid tr.jqgrow td{height: 33px !important;}
.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid .ui-jqgrid-htable th,.ui-jqgrid-hdiv{height: 33px !important;}
.ui-jqgrid .ui-jqgrid-resize-ltr{margin: 0px !important;}
#pager2{height: 36px !important;}
input.ui-pg-input {
font-size: 0.8em;
height: 33.5px !important;
margin: 0;
min-width:50px;
width:80px !important;
}
.ui-th-column{padding-top:10px !important; }
</style>
<div class="content">
<div class="container">
<div class="row">
<h1 class="text_underline">Quiz Results: </h1>
<br/>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<table id="list2"></table>
<div id="pager2" ></div>
</div>
</div>
</div>
</div>
<script src="js/jquery-ui-custom.min.js"></script>
<script src='js/grid.locale-en.js'></script>
<script src='js/jquery.jqGrid.min.js'></script>
<script>
jQuery("#list2").jqGrid({
url:'server.php',
datatype: "json",
mtype: "GET",
colNames:['Quiz No','Category Name', 'Right Answer', 'Wrong Answer','Unanswered'],
colModel:[ {name:'id',index:'id', align:"center"},
{name:'category_name',index:'category_name', align:"center"},
{name:'right_answer',index:'right_answer', align:"center"},
{name:'wrong_answer',index:'wrong_answer', align:"center"},
{name:'unanswered',index:'unanswered', align:"center"}
],
rowNum:10,
rowList:[10,20,30],
gridview:true,
pager:'#pager2',
sortname: 'id',
recordpos: 'left',
viewrecords: true,
sortorder: "asc",
height: '100%'
});
</script>
<?php require_once 'templates/footer.php';?>
<?php
ob_start();
session_start();
require_once 'config.php';
$db = new Cl_DBclass();
$user_id = $_SESSION['id'];
$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
$result = sqlsrv_query( $db->con, "SELECT COUNT(*) AS count FROM scores where user_id = '$user_id' ");
$row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
//$total_pages = ceil($count/1);
} else {
$total_pages = 0;
} if ($page > $total_pages)
$page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT S.*, C.category_name from scores S LEFT JOIN categories C ON S.category_id = C.id where S.user_id = '5'
ORDER BY $sidx $sord
OFFSET $start ROWS
FETCH NEXT $limit-$start ROWS ONLY ";
$result = sqlsrv_query( $db->con, $SQL ) or die("Couldn t execute query.".sqlsrv_errors($db->con));
$responce = new stdClass();
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
$responce->rows[$i]['id']=$row['id'];
$responce->rows[$i]['cell']=array($row['id'],$row['category_name'],$row['right_answer'],$row['wrong_answer'],$row['unanswered']); $i++;
}
echo json_encode($responce);exit;
</div>