For one reason or another, the front end (HTML) of my jqGrid plugin is not communicating properly with the back-end (PHP) of the plugin. I have spent five hours on this now, and I have absolutely nothing to show for it. I have tried both XML as well as jSon methods. i have a feeling I am using an outdated back-end method; however, I cannot be sure as I can’t find that great of documentation. I will post my code here as I’m literally falling asleep writing this, and will check back for an update asap (taking a quick nap).
Front End
<?php
require_once 'tabs.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery jqGrid Demonstration</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript" ></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = false;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// first create the grid
$('#grid').jqGrid({
url:'grid.php',
datatype: "json",
height: 100,
width: 900,
colNames:['Customer ID','Hardware ID', 'Username','Password','Email','Last Login','Last IP','Registration Date','Expire Date'],
colModel:[
{name:'customerid',index:'customerid', width:150},
{name:'hardware_id',index:'hardware_id', width:150},
{name:'username',index:'username', width:100},
{name:'password',index:'password', width:100},
{name:'email',index:'email', width:100},
{name:'lastlogin',index:'lastlogin', width:100},
{name:'lastipaddress',index:'lastipaddress', width:100},
{name:'registration_date',index:'registration_date', width:100},
{name:'expire_date',index:'expire_date', width:100}
],
rowNum:5,
rowList:[5,8,10,20,30],
mtype: "GET",
gridview: true,
pager: '#pager',
sortname: 'customerid',
viewrecords: true,
sortorder: "desc",
caption: "Virtual scrolling on local data"
});
jQuery("#grid").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
// now you can any time change the width of the grid
$('#grid').jqGrid('setGridWidth', 900);
});
//]]>
</script>
</head>
<body>
<div>
<?php include ("grid.php");?>
</div>
<div id="pager"></div>
</body></html>
Back End – Grid.php
<?php
include '../dbc.php';
page_protect();
require_once 'jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server
$link = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$link ->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($link);
$username = $_SESSION['user_name'];
$grid->SelectCommand = "SELECT * FROM tblcustomer_$username";
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array("rowNum"=>100,"sortname"=>"customerid","height"=>150));
// Change some property of the field(s)
$grid->setColProperty("lastlogin", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
"search"=>false,
"width"=>"400"
));
// Registration date
$grid->setColProperty("registration_date", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
"search"=>false,
"width"=>"400"
));
$grid->setColProperty("expire_date", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
"search"=>false,
"width"=>"400"
));
$grid->setColProperty("customerid",array("width"=>"650"));
$grid->setColProperty("hardware_id",array("width"=>"250"));
$grid->setColProperty("username",array("width"=>"150"));
$grid->setColProperty("password",array("width"=>"150"));
$grid->setColProperty("email",array("width"=>"150"));
$grid->setColProperty("lastipaddress",array("width"=>"100"));
$grid->setFilterOptions(array("stringResult"=>true));
$grid->navigator=true;
$grid->setNavOptions('navigator',array("excel"=>true,"add"=>true,"edit"=>true,"view"=>true,"del"=>true,"search"=>true));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$link = null;
?>
I don’t use myself any commercial version of jqGrid like jqSuite or jqGrid for PHP, but after the first look at the demo page I could see some problems in your code:
Your code is a mix from the jqGrid and the code of the commercial version of jqGrid.
If you use jqGrid for PHP you should remove the code in
$(document).ready(function() {/*the code should be removed*/. Because you use the linein your PHP code you should the body of your HTML code to
In the case the HTML fragment
<table id="grid"></table><div id="page"></div>will produces the PHP code you you.If you don’t use the commercial version of jqGrid you should include
<table id="grid"></table>in your HTML code. You should also change'#pager2'parameter of'navGrid'to'#pager'. To have the grid filled with the data you need changeurlparameter of jqGrid to any URL which provide JSON data for the grid. See the documentation about the format of the JSON data.