使用AJAX和PHP将数据加载到jqGrid_Php_Ajax_Jqgrid

使用AJAX和PHP将数据加载到jqGrid

php ajax jqgrid

使用AJAX和PHP将数据加载到jqGrid,php,ajax,jqgrid,Php,Ajax,Jqgrid,我在浏览器端有以下代码 <!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>

我在浏览器端有以下代码

<!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>


$（文档）.ready（函数（）{
$（“#tblevents”）.jqGrid({
url:“getGridData.php”，
数据类型：“json”，
mtype:“POST”，
postData:{
搜索：函数（）{return'manage'；}
},
colModel：[
{名称：'id'，索引：'id'，标签：'id'，宽度：10}，
{名称：'eventdate'，索引：'eventdate'，标签：'eventdate'，宽度：100，对齐：'center'，排序类型：'date'}，
{名称：'reportdate'，索引：'reportdate'，标签：'reportdate'，宽度：180，对齐：'left'}，
{名称：'eventdescription'，索引：'eventdescription'，标签：'Description'，宽度：430}
],
rowNum:10，
行列表：[10,20]，
寻呼机：“#寻呼机”，
高度：“100%”，
宽度：“自动宽度”，
viewrecords：是的，
gridview：没错，
描述：“ATM-ANS事件”
});
});

服务器端代码

<?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();
}


$（文档）.ready（函数（）{
$（“#tblevents”）.jqGrid({
url:“getGridData.php”，
数据类型：“json”，
mtype:“POST”，
colNames:[“Id”、“eventdate”、“reportdat”、“event”
说明“]，
colModel：[
{name:'id'}，
{name:'eventdate'}，
{名称：'reportdate'}，
{name:'eventdescription'}
],
寻呼机：“#寻呼机”，
rowNum:10，
行列表：[10,20]，
分拣员：“asc”，
高度：“自动”，
viewrecords：是的，
gridview：没错，
描述：“ATM-ANS事件”
});

}))；

$（文档）.ready（函数（）{
$（“#tblevents”）.jqGrid({
url:“getGridData.php”，
数据类型：“json”，
mtype:“POST”，
colNames:[“Id”、“eventdate”、“reportdat”、“event”
说明“]，
colModel：[
{name:'id'}，
{name:'eventdate'}，
{名称：'reportdate'}，
{name:'eventdescription'}
],
寻呼机：“#寻呼机”，
rowNum:10，
行列表：[10,20]，
分拣员：“asc”，
高度：“自动”，
viewrecords：是的，
gridview：没错，
描述：“ATM-ANS事件”
});

}))；

 <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"
});