I have problem that... $page = $_request['page']; ...is doesn't working.
when i'm enter localhost/example2.php , i got this...
<?xml version='1.0' encoding='utf-8'?>
<rows>
<page></page>
<total>0</total>
<records>1</records>
<row id='1'>
<cell>1</cell>
<cell>2001-01-10</cell>
<cell>103.98</cell>
<cell>45.34</cell>
<cell>149.32</cell>
<cell><![CDATA[xxx]]></cell>
</row>
</rows>
why $page is null?
this is my code(copied from jqgrid wiki)...
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>PHP jqGrid Class Example</title>
<!-- installation files of jqgrid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!-- installation files of jqgrid -->
<script type="text/javascript">
jQuery(document).ready(function(){
$("#list").jqGrid({
url:'example.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'},
{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: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'My first grid'
});
});
</script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>
example.php
<?php
$page = $_GET['page'];
$limit = $_GET['rows'];
$sidx = $_GET['sidx'];
$sord = $_GET['sord'];
if(!$sidx) $sidx =1;
$dbhost = 'localhost';
$dbuser = 'root';
$dbpassword = '1234';
$database = 'northwind';
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error connecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if($count > 0 && $limit > 0)
{
$total_pages = ceil($count/$limit);
}
else
{
$total_pages = 0;
}
if($page > $total_pages)
{
$page=$total_pages;
}
$start = $limit*$page - $limit;
if($start <0)
{
$start = 0;
}
//$SQL = "SELECT invid, invdate, amount, tax,total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit";
$SQL = "SELECT invid, invdate, amount, tax,total, note FROM invheader";
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());
header("Content-type: text/xml;charset=utf-8");
$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .= "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$s .= "<row id='". $row['invid']."'>";
$s .= "<cell>". $row['invid']."</cell>";
$s .= "<cell>". $row['invdate']."</cell>";
$s .= "<cell>". $row['amount']."</cell>";
$s .= "<cell>". $row['tax']."</cell>";
$s .= "<cell>". $row['total']."</cell>";
$s .= "<cell><![CDATA[". $row['note']."]]></cell>";
$s .= "</row>";
}
$s .= "</rows>";
echo $s;
?>
THANKS for your help :)
If in example2.php you have:
$page = $_request['page'];
as you said in your post, then it's not working because it should be:
$page = $_REQUEST['page'];
Related
I am using jqgrid and trying to edit a cell and update the value to table in database, but im missing something and couldnt make it work. please help me to correct if im missing something.below is the code for your reference. please help. thanks in advance.
HTML
$qr="SELECT id,`emp_id`,`emp_name`, `att_date`, `emp_join_date`, `intime`,`outtime`,`Total_Hours`,`OT Hours`,`Status` FROM `db_emp_attendance` WHERE Status='Absent' and att_date='2017-04-01'";
$q = mysql_query($qr);
$rows = array();
while($r = mysql_fetch_assoc($q)) {
$rows[] = $r;
}
$json_data=json_encode($rows);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/ecmascript" src="jquery.min.js"></script>
<script type="text/ecmascript" src="jquery.jqGrid.min.js"></script>
<script type="text/ecmascript" src="grid.locale-en.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css"/>
<meta charset="utf-8" />
</head>
<body>
<table id="rowed5"></table>
<script type="text/javascript">
var lastsel2
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 400,
autowidth: true,
colNames:['ID','Emp ID','Name', 'Join Date','Attendance Date', 'Time In','Time Out','Total Hours','OT Hours','Status','leave_type'],
colModel:[
{name:'id',index:'id', width:75,align:"center",key: true},
{name:'emp_id',index:'emp_id', width:75,align:"center"},
{name:'emp_name',index:'emp_name', width:150,align:"left"},
{name:'emp_join_date',index:'emp_join_date', width:150,align:"center"},
{name:'att_date',index:'att_date', width:100, align:"center"},
{name:'intime',index:'intime', width:80,align:"center"},
{name:'outtime',index:'outtime', width:80,align:"center"},
{name:'Total_Hours',index:'Total_Hours', width:80,align:"center"},
{name:'OT Hours',index:'OT Hours', width:80,align:"center"},
{name:'Status',index:'Status', width:150,align:"center"},
{name:'leave_type',index:'leave_type', width:150, sortable:false,editable: true,
edittype: "select",
editoptions: {
value: "SickLeave:SickLeave;DayOff:DayOff;Vacation:Vacation"}
}
],
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
jQuery('#rowed5').jqGrid('editRow',id,true);
lastsel2=id;
}
},
editurl:'update.php',
caption: "Attendance"
});
var mydata2 =<?PHP echo $json_data;?>;
for(var i=0;i < mydata2.length;i++)
jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
</script>
</body>
</html>
DB UPDATE PHP FILE
if($_POST['oper']=='edit')
{
$id = mysql_real_escape_string($_POST['id']);
$leave_type = mysql_real_escape_string($_POST['leave_type']);
$sql = "UPDATE db_emp_attendance SET leave_type = '$leave_type' WHERE id = '$id'";
mysql_query($sql);
}
i found a solution and now it is updating in database. i had to add cellEdit : true, cellsubmit : 'remote', cellurl : 'update.php'
Can somebody tell me what am I missing here for the code to display data from my database? Much appreciated!
HTML
<!DOCTYPE html>
<html lang="en" ng-app="VinylApp">
<head>
<meta charset="utf-8">
<title>Vinyl Record Store</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="script.js"></script><script src="app.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div ng-app="VinyApp" ng-controller="VinylListController">
<table>
<tr ng-repeat="vinyl in vinyls">
<td>{{vinyl.Vinyl_ID}}</td>
<td>{{vinyl.VinylName}}</td>
<td>{{vinyl.Artist}}</td>
<td>{{vinyl.Price}}</td>
</tr>
</table>
</div>
</body>
</html>
JS
var app= angular.module('VinylApp', []);
app.controller('VinylListController', function($scope, $http){
$http.get("db_con.php")
.then(function(response){
$scope.vinyls = response.data.records;
});
});
PHP
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type:application/json; charset=UTF-8");
$conn = new mysqli("myServer","myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT * FROM vinyl");
$outp= "";
while($rs=$result->fetch_array(MYSQLI_ASSOC)){
if ($outp != "") {$outp .= ",";}
$outp .= '{"VinylID":"' . $rs["VinylID"] . '",';
$outp .= '"VinylName":"' . $rs["VinylName"] . '",';
$outp .= '"Artist":"'. $rs["Artist"] . '",';
$outp .= '"Price":"'. $rs["Price"] . '"}'; } $outp ='{"records":['.$outp.']}'; $conn->close();
echo($outp);
}
?>
i have solve issue. Please try this code is working g fine for me. here add new angular.min.js and some changes added
var app= angular.module('VinylApp', []);
app.controller('VinylListController', function($scope, $http){
$http.get("db_con.php")
.then(function(response){
$scope.vinyls = response.data;
});
});
<!DOCTYPE html>
<html lang="en" ng-app="VinylApp">
<head>
<meta charset="utf-8">
<title>Vinyl Record Store</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="app.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="VinyApp">
<div ng-controller="VinylListController">
<table>
<tr ng-repeat="vinyl in vinyls">
<td>{{vinyl.Vinyl_ID}}</td>
<td>{{vinyl.VinylName}}</td>
<td>{{vinyl.Artist}}</td>
<td>{{vinyl.Price}}</td>
</tr>
</table>
</div>
</body>
</html>
<?php
$conn = new mysqli("localhost","root", "", "pinakin_northwind");
$result = $conn->query("SELECT * FROM vinyl");
$outp = array();
while( $rs = $result->fetch_array(MYSQLI_ASSOC)) {
$outp[] = $rs;
}
echo json_encode($outp);
?>
I have the following code in browser side.
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/jqGrid.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#tblevents").jqGrid({
url: "getGridData.php",
datatype: "json",
mtype: "POST",
postData: {
search: function() { return 'manage'; }
},
colModel: [
{name:'id',index:'id',label:'ID', width:10},
{name:'eventdate',index:'eventdate',label:'Event date', width:100, align:'center', sorttype:'date'},
{name:'reportdate',index:'reportdate',label:'Report date', width:180, align:'left'},
{name:'eventdescription',index:'eventdescription',label:'Description', width:430}
],
rowNum: 10,
rowList: [10,20],
pager: '#pager',
height: '100%',
width: 'autowidth',
viewrecords: true,
gridview: true,
caption: "ATM-ANS Occurrences"
});
});
</script>
</head>
<body>
<div class="mycenter">
<table id='tblevents'></table>
<div id='pager'></div>
</div>
</body>
</html>
The server side code.
<?php
$sqconn = "mysql:host=localhost;dbname=eoccurrence";
$dbh = new PDO($sqconn, 'user', '');
$page = $_POST['page'];
$limit = $_POST['rows'];
$sidx = $_POST['sidx'];
$sord = $_POST['sord'];
if(!$sidx) {$sidx =1;}
try {
$SQLQues = "SELECT COUNT(*) AS count FROM event";
$cmd = $dbh->query($SQLQues, PDO::FETCH_ASSOC);
$res = $cmd->fetchAll();
$count = $res[0]['count'];
if( $count > 0 && $limit > 0) {$total_pages = ceil($count/$limit);}
else {$total_pages = 0;}
if ($page > $total_pages) {$page=$total_pages;}
$start = $limit*$page - $limit;
if($start <0) {$start = 0;}
$SQLQues = "SELECT ID, date_format(eventdate, '%d-%m-%Y %H:%i') AS eventdate, " .
"date_format(reportDate, '%d-%m-%Y') AS reportdate, SUBSTRING(eventdescription,1,70) AS eventdescription " .
"FROM event" .
" ORDER BY event.eventdate DESC LIMIT $start , $limit";
$cmd = $dbh->query($SQLQues, PDO::FETCH_BOTH);
$i=0;
while ($row = $cmd->fetch()) {
$responce->rows[$i]['id']=$row['ID'];
$responce->rows[$i]['cell']=array($row['eventdate'],$row['reportdate'],$row['eventdescription']);
$i++;
}
echo json_encode($response);
return;
} catch (PDOException $exc) {
echo $exc->getTraceAsString();
}
The $response that is encoded from php to browser is shown in the following image, capture with XDebug.
The resulting grid is as shown below, with no row data at all.
What I'm doing wrong?
<script type="text/javascript">
$(document).ready(function () {
$("#tblevents").jqGrid({
url: "getGridData.php",
datatype: "json",
mtype: "POST",
colNames: ["Id","eventdate", "reportdat", "event
description"],
colModel: [
{name:'id'},
{name:'eventdate'},
{name:'reportdate'},
{name:'eventdescription'}
],
pager: "#pager",
rowNum: 10,
rowList: [10,20],
sortorder: "asc",
height: 'auto',
viewrecords: true,
gridview: true,
caption: "ATM-ANS Occurrences"
});
});
I'm trying to retrieve information from my database, and output it to my page. I'm able to hardcore it, so to show exactly what I want to be able to do is located here:
I'm not having any console errors in the javascript, but I am unable to append data to the list once it is clicked.
HTML & JS:
<!doctype html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../img/sd.ico" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="body">
<div id="header"><h1>Bookmarks</h1></div><!-- header -->
<iframe id="iFrame" name="iFrame"></iframe>
<div id="links"><ul id="accordion">
<li><div class="bookmarkTitle"><p><h4>CareerResources</h4></p></div></li><ul id="CareerResources">
</ul><li><div class="bookmarkTitle"><p><h4>CSS</h4></p></div></li><ul id="CSS">
</ul><li><div class="bookmarkTitle"><p><h4>JS</h4></p></div></li><ul id="JS">
</ul><li><div class="bookmarkTitle"><p><h4>JS: Jquery</h4></p></div></li><ul id="JS: jQuery">
</ul></div><!-- links end -->
</div><!-- body end -->
<script type="text/javascript">
$(document).ready(function(){
$("#accordion > li").click(function(e){
var catName=$(e.target).text();
$.getJSON("get.php?catName=" + catName, function(data){
if (data.data){
$.each(data.data,function(index,value){
var url = value.URL;
var title = value.title;
var desc = value.desc;
alert(catName);
$("#"+catName).append('<div class="bookmark"><p><h3>'+title+'</h3><br />'+desc+'</p></div>');
});
}
});
});
});
</script>
</body>
</html>
PHP:
// retval: 0 - login ok, 1 - login failed, 2 - internal error
$json = array("retval" => 2, "data" => NULL, "debug" => "");
$catName=mysql_real_escape_string($_REQUEST['catName']);
$sql="SELECT * FROM linktb WHERE catName='$catName'";
$json['debug'] .= "SQL query was: ".$sql."\n";
$result=mysql_query($sql);
if (!$result) {
$json['debug'] .= "SQL query failed\n";
$json['debug'] .= "Other output: ". ob_get_contents();
ob_end_clean();
die(json_encode($json));
}
$count=mysql_num_rows($result);
if($count > 0){
$json['retval'] = 0;
$json['data'] = array();
while ($row = mysql_fetch_assoc($result)){
$json['data'][] = $row;
}
} else {
$json['retval'] = 1;
}
$json['debug'] .= "Other output: ". ob_get_contents();
ob_end_clean();
echo json_encode($json);
var catID=e.target.text(); Should be var catID=$(e.target).text(); as .text() is a jQuery method.
If you want to iterate through the returned data you'll have to do it in the success function. Also from your php script you only output one row from your database.
if($count > 0){
$json['retval'] = 0;
$json['data'] = array();
while ($row = mysql_fetch_assoc($result)){
$json['data'][] = $row;
}
}
else {
$json['retval'] = 1;
}
$.getJSON("get.php?catID=" + catID, function(data){
if (data.data){
$.each(data.data,function(index,value){
var url = value.URL;
var title = value.title;
var desc = value.desc;
$("#"+catID).appendText('<div class="bookmark"><p><h3>'+title+'</h3><br />'+desc+'</p></div>');
});
}
});
The data at the top is
121310000-00-00103.9845.34149.32This is record 120000-00-00104.9846.34159.32This is record 230000-00-00104.9846.34159.32This is record 240000-00-00104.9846.34159.32This is record 250000-00-00104.9846.34159.32This is record 260000-00-00104.9846.34159.32This is record 272011-09-07108.9850.34159.32This is record 682011-09-07108.9850.34159.32This is record 792011-09-07108.9850.34159.32This is record 8102011-09-07108.9850.34159.32This is record 9
Then the grid has coloumn names but no data. I don't know what's wrong. How can I get data inside the grid?
Controller:
function loadDataGrid() {
$this->load->view('test2');//test.php view file
$page = isset($_POST['page']) ? $_POST['page'] : 1; // get the requested page
$limit = isset($_POST['rows']) ? $_POST['rows'] : 10; // get how many rows we want to have into the grid
$sidx = isset($_POST['sidx']) ? $_POST['sidx'] : 'name'; // get index row - i.e. user click to sort
$sord = isset($_POST['sord']) ? $_POST['sord'] : ''; // get the direction
$start = $limit * $page - $limit; // do not put $limit*($page - 1)
$start = ($start < 0) ? 0 : $start; // make sure that $start is not a negative value
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_POST['searchField']) ? $_POST['searchField'] : false;
$searchOper = isset($_POST['searchOper']) ? $_POST['searchOper'] : false;
$searchString = isset($_POST['searchString']) ? $_POST['searchString'] : false;
$this->load->model('users');
if (!$sidx)
$sidx = 1;
$count = $this->users->total_results(); //get total rows from table daily
if ($count > 0) {
$total_pages = ceil($count / $limit); //calculating total number of pages
} else {
$total_pages = 0;
}
if ($page > $total_pages)
$page = $total_pages;
$query = $this->users->getAllGrid($start, $limit, $sidx, $sord, $where); //add parameter to model
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$this->output->set_header("Content-type: text/xml;charset=utf-8");
$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .= "<rows>";
$s .= "<page>" . $responce->page . "</page>";
$s .= "<total>" . $responce->total . "</total>";
$s .= "<records>" . $responce->records . "</records>";
foreach ($query as $row) {
$s .= "<row id='" . $row['invid'] . "'>";
$s .= "<cell>" . $row['invid'] . "</cell>";
$s .= "<cell>" . $row['invdate'] . "</cell>";
$s .= "<cell>" . $row['amount'] . "</cell>";
$s .= "<cell>" . $row['tax'] . "</cell>";
$s .= "<cell>" . $row['total'] . "</cell>";
$s .= "<cell>" . $row['note'] . "</cell>";
$s .= "</row>";
}
$s .= "</rows>";
echo $s;
}
View:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<link type="text/css" href="<?php echo base_url() ?>jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url() ?>jqgrid/css/jquery.searchFilter.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>jqgrid/jquery.layout.js"></script>
<title>Demo Jquery JqGrid Codeigniter</title>
</head>
<body>
<?
$ci = & get_instance();
$base_url = base_url();
?>
<script type="text/javascript">
jQuery().ready(function (){
jQuery("#list1").jqGrid({
url:'<?= $base_url . 'index.php/daily/loadDataGrid' ?>', //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Date','Name','Amount'], //Grid column headings
colModel:[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{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,
width: 450,
height: 300,
rowList:[10,20,30],
pager: '#pager1',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Daily"
}).navGrid('#pager1',{edit:false,add:false,del:false});
});
</script>
<table id="list1"></table> <!--Grid table-->
<div id="pager1"></div> <!--pagination div-->
</body>
</html>
Model:
function getAllGrid($start, $limit, $sidx, $sord, $where) {
$this->db->select('invid,invdate,client_id,amount,tax,total,note');//->from('invheader');
$this->db->limit($limit);
if ($where != NULL
)$this->db->where($where, NULL, FALSE);
$this->db->order_by('invid',$sord);//$sord $sidx
$query = $this->db->get('invheader', $limit, $start);
return $query->result_array();
}
Maybe you have to setting jqgrid parameter datatype become "xml" not "json" *.
Because Output from your url send "xml" code but you setting it to be "json".
Maybe it leads wrong result in your jqgrid ( no data ).
I make example for you using json for data whom I create in locally not using url.
Code:
<!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>
<title>JqGrid Test</title>
<script src="js/jquery-1.5.1.min.js" type="application/javascript"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js" type="application/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="application/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="application/javascript"></script>
<link href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready( function(){
// Create JSON data locally
var myData= [
{ name: 'jqgrid1', address: 'in the sky', jobs: 'give a nice table' },
{ name: 'jqgrid2', address: 'in the sky', jobs: 'give a nice table' },
{ name: 'jqgrid3', address: 'in the sky', jobs: 'give a nice table' },
{ name: 'jqgrid4', address: 'in the sky', jobs: 'give a nice table' }
];
$grid= $("#list2");
$grid.jqGrid({
data: myData,
datatype: "local", // Set datatype to detect json data locally
colNames:['Name','Address','Jobs'],
colModel:[
{name:'name',index:'name', width:55},
{name:'address',index:'address', width:90},
{name:'jobs',index:'jobs', width:100}
],
rowNum: 2,
rowList:[10,20],
pager: '#pager2',
sortname: 'name',
viewrecords: true,
sortorder: "asc",
caption:"JSON Example"
})
$grid.jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
});
</script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
If you want to make json data, get data from database in array type then change to json type using json_encode($yourdata). In your Controller you create output with xml type but set parameter datatype become "json".
More Information About jqGrid