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
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 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"
});
});
Several different questions on this topic, but none of the answers helped, so thought I'd try and see if anyone can figure this out..
So I have a simple grid, here is the HTML/PHP:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo PROPERTY_TITLE; ?></title>
<!-- LOAD KENDO CSS -->
<link rel="stylesheet" type="text/css" href="css/kendo.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.common.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.default.min.css"/>
<!-- -------------- -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>css/style.css" />
<script src="js/jquery.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>
<!-- LOAD KENDO -->
<script type="text/javascript" src="js/kendo.all.min.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>
<!-- ---------- -->
</head>
<body class="bg">
<div class="grid-box7 box2close min_height_700" style="display: none;">
<script>
// Function to build the grid
function generateRawDataGrid() {
var from = $("#fromDate").val();
var to = $("#toDate").val();
<? if ( isset($_GET['source']) && is_numeric($_GET['source']) ) { ?>
var source = <? echo trim($_GET['source']); ?>;
<? } else { ?>
var source = '';
<? } ?>
$(".li_current_report").html("Raw Statistical Data");
$("#rawDataGrid").kendoGrid({
columns: [
{ title: "Action",
field: "comment"
}
],
dataSource: {
transport: {
read: {
url: "data/get_stats.php?from=" + from + "&to=" + to + "&source=" + source + "&rt=3"
}
},
schema: {
data: "data"
},
type: "json"
},
pageable: {
refresh: true,
pageSize: 15,
pageSizes: [
15,30,60,100
]
},
sortable: true,
filterable: true,
scrollable: false,
selectable: "row",
reorderable: true
}); // END: Report Grid
} // END: Function generateGrid()
</script>
<div id="rawDataGrid" >
<!-- Grid is here -->
</div>
</div>
</body>
</html>
Here is the datasource code:
// Build SQL statement
$SQL_STATS = "
SELECT comment
FROM stats_tracking
WHERE date_entered between '" . $FROM . "' AND '" . $TO . "' AND
action_detail1 NOT In(" . $excludeIPs . ") AND active = 1";
if ( is_numeric($_GET['source']) && trim($_GET['source']) != "" ){
$SQL_STATS .= "
AND source = '" . $_GET['source'] . "'";
}
$SQL_STATS .= "
ORDER BY date_entered DESC
";
// Get the data
$statResult = mysql_query($SQL_STATS); // Run the actual query.
$dataOut = array(); // Create empty array for temp data to store in main output array
while ( $stat = mysql_fetch_object($statResult) ) {
$dataOut[] = $stat;
}
header("Content-type: application/json");
echo "{\"data\":" . json_encode($dataOut). "}";
The output seems fine - and LINTs fine as well, here's a piece of it:
{"data":[{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"}]}
But the grid isn't rendering. I've used several JSON validators. And the browser is seeing this output as APPLICATION/JSON.
Any ideas?
Thanks to all in advance!
I don't see where you are calling this method. generateRawDataGrid()
Perhaps you need to create a document.ready() function and call it from there.
$(document).ready(function () {
generateRawDataGrid();
});
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>');
});
}
});
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'];