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"
});
});
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'
I am using codeigniter. When I call an ajax request to the page by giving the full path to file, it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to implement server filtering, sorting and paging with jqxGrid.</title>
<link rel="stylesheet" href="http://localhost/jqwidgets-ver3.2.1/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'ShipName', type: 'string'},
{ name: 'ShipAddress', type: 'string' },
{ name: 'ShipCity', type: 'string' },
{ name: 'ShipCountry', type: 'string' }
],
cache: false,
url: 'http://localhost/CodeIgniter_2.1.4/index.php/blog/controllerfunction',
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
source: dataadapter,
width: "100%",
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: 'Ship Name', datafield: 'ShipName'},
{ text: 'Address', datafield: 'ShipAddress'},
{ text: 'City', datafield: 'ShipCity'},
{ text: 'Country', datafield: 'ShipCountry'}
]
});
});
</script>
</head>
<body class='default'>
<h1>Shipment Records</h1>
<div style="width: 1000px" id="jqxgrid"></div>
</body>
</html>
works fine with
url: 'http://localhost/CodeIgniter_2.1.4/application/view/serverfiltering_paging_and_sorting_data.php',
but
url: 'http://server/CodeIgniter_2.1.4/index.php/controllername/controlerfunction',
shows an error : SyntaxError: JSON.parse: unexpected character
I did not make any other change in the code.
I use the code below to get data from a database. No issues here.....
$query = "SELECT * FROM takenlijst";
$from = 0;
$to = 999;
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$taken[] = array(
'taaknummer' => $row['taaknummer'],
'naam' => $row['naam'],
'taak' => $row['taak'],
'prioriteit' => $row['prioriteit'],
'datum' => $row['datum']
);
}
echo json_encode($taken);
However, when i use the code below i get no data. What am i doing wrong?
<html lang="en">
<head>
<link rel="stylesheet" href="../../jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../jquery/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jquery/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'taaknummer', type: 'string'},
{ name: 'naam', type: 'string'},
{ name: 'taak', type: 'string'},
{ name: 'prioriteit', type: 'string'},
{ name: 'datum', type: 'string'}
],
url: 'http://www.site.com/management/takenlijstdata.php',
cache: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'Taaknummer', datafield: 'taaknummer', width: 250},
{ text: 'Naam', datafield: 'naam', width: 150 },
{ text: 'Taak', datafield: 'taak', width: 180 },
{ text: 'Prioriteit', datafield: 'prioriteit', width: 200 },
{ text: 'Datum', datafield: 'datum', width: 120 }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
The echo displays the data correctly. Even when i output the data to a txt file it can be read but not when i try to read it from this code.
I have been looking around for an answer to this but have not been able to find one. I am currently taking data from a mssql database and everything seems to populate fine on the php end but here is the code anyway
$responce->total = $total_pages;
$responce->page = $page;
$responce->records = $count;
$i=0;
while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
$responce->rows[$i]['id']=$row[Cell1];
$responce->rows[$i]['cell']=array($row[Cell1],$row[Cell2],$row[Cell3]);
$i++;
}
echo $json_encode($responce);
And my json file comes out like this:
{"total":"1","page":"1","records":"1","rows":[{"id":"1","cell":["1","2","3"]}]}
And finally my HTML looks like this:
<link rel="stylesheet" type="text/css" media="screen" href="css/south-street/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link href="css/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.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>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#list").jqGrid({
url: "retrieve.php",
datatype: "json",
mtype: "POST",
colNames: ["Cell1", "Cell2", "Cell3"],
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
jsonReader: { repeatitems: false },
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
scroll:1,
sortname: Cell1",
sortorder: "asc",
sortable:true,
viewrecords: true,
gridview: true,
ignoreCase:true,
autowidth:true,
ondblClickRow: function (id) {
$(this).jqGrid('viewGridRow', id, { caption: "Server Information" });
}
});
});
</script>
If someone could please help me to figure out why my grid wont properly populate I would really appreciate it!
The main errors in your code are the following:
you should fix syntax error sortname: Cell1" to sortname: "Cell1".
remove jsonReader: { repeatitems: false } which is wrong with thze format which you use.
remove the second version of jQuery. Either jquery.js or jquery-1.9.0.min.js should be used.
May be your JS file are conflicted.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
You should be use only one JS instead use of both jquery file.
and Change sequence of js file like this way..
<script src="js/jquery-1.9.0.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>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
Please remove "," from colModel
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
to
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' }
],
I think it solve your all problem.
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