当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - JQgrid "search big sets" demo

问题描述:

This is my first implementation of jqgrid. It is also the first time I have tried to get javascript and php to play together. We need a table which will let the user search through 100k+ records, so I'm trying to create a table which displays about 500 records max. It will then let the user alter the content of the view via search bars, checkboxes, and whatnot. I am trying to duplicate the "search big sets" demo found on the jqgrid demo website under "Advanced" http://trirand.com/blog/jqgrid/jqgrid.html

I've made some progress, but I have reached a point where I am totally stuck. I don't understand why what I've done doesn't work. There are no errors anywhere that I can find, and everything looks like it should work per the demo.

Disclaimer: The code for the demo is not constructed in an... ideal fashion. Some of the code in the demo php file cannot function given the provided javascript file. I'm concerned that due to this design my own duplication of the code (code which itself cannot possibly work) probably has errors that are really difficult for a newbie to spot.

My html and php files are included below. Underneath that I have also included the firebug response from the POST:

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" media="screen" href="theme/jquery-ui-1.11.1.custom/jquery-ui.css" />

<link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" />

<link rel="stylesheet" type="text/css" media="screen" href="plugins/ui.multiselect.css" />

<!-- The actual JQuery code -->

<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>

<!-- The JQuery UI code -->

<script type="text/javascript" src="theme/jquery-ui-1.11.1.custom/jquery-ui.min.js" ></script>

<!-- The jqGrid language file code-->

<script src="src/grid.locale-en.js" type="text/javascript"></script>

<!-- The atual jqGrid code -->

<script src="src/jquery.jqGrid.js" type="text/javascript"></script>

<script src="plugins/ui.multiselect.js" type="text/javascript"></script>

<script src="src/jquery.jqGrid.js" type="text/javascript"></script>

<script src="plugins/jquery.tablednd.js" type="text/javascript"></script>

<script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>

<script type="text/javascript">

$.jgrid.no_legacy_api = true;

$.jgrid.useJSON = true;

</script>

</head>

<body>

<div class="h">Search By:</div>

<div>

<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch <br/>

Code<br />

<input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />

</div>

<div>

Name<br>

<input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />

<button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>

</div>

<br />

<table id="bigset"></table>

<div id="pagerb" ></div>

<script type="text/javascript">

jQuery("#bigset").jqGrid({

url:'http://localhost/DataGrid/ReviewRetrieval.php',

datatype: "json",

height: 255,

width: 600,

colNames:['ProductId','Date', 'Rating'],

colModel:[

{name:'productId',index:'productId', width:65, sorttype:'string', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},

{name:'reviewCreated',index:'reviewCreated', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},

{name:'starValue',index:'starValue', width:100}

],

rowNum:12,

// rowList:[10,20,30],

mtype: "POST",

pager: jQuery('#pagerb'),

pgbuttons: false,

pgtext: false,

pginput:false,

sortname: 'productId',

viewrecords: true,

sortorder: "asc",

caption: "Reviews"

});

jQuery("#bigset").jqGrid('filterToolbar',{searchOperators : true});

var timeoutHnd;

var flAuto = false;

function doSearch(ev){

if(!flAuto)

return;

// var elem = ev.target||ev.srcElement;

if(timeoutHnd)

clearTimeout(timeoutHnd)

timeoutHnd = setTimeout(gridReload,500)

}

function gridReload(){

var nm_mask = jQuery("#item_nm").val();

var cd_mask = jQuery("#search_cd").val();

jQuery("#bigset").jqGrid('setGridParam',{url:"http://localhost/DataGrid/ReviewRetrieval.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");

}

function enableAutosubmit(state){

flAuto = state;

jQuery("#submitButton").attr("disabled",state);

}

</script>

</body>

</html>

PHP:

<?php

//error_reporting(E_ALL);

//ini_set('display_errors', 1);

$page = !empty($_GET['page']) ? $_GET['page'] : 1;// get the requested page

$limit = 500;// get how many rows we want to have into the grid

$sidx = !empty($_GET['sidx']) ? $_GET['sidx'] : 1;// get index row - i.e. user click to sort

$sord = !empty($_GET['sord']) ? $_GET['sord'] : "DESC"; // get the direction

if(!$sidx) $sidx =1;

if(isset($_GET["nm_mask"]))

$nm_mask = $_GET['nm_mask'];

else

$nm_mask = "";

if(isset($_GET["cd_mask"]))

$cd_mask = $_GET['cd_mask'];

else

$cd_mask = "";

//construct where clause

$where = "WHERE 1=1";

if($nm_mask!='')

$where.= " AND starValue LIKE '$nm_mask%'";

if($cd_mask!='')

$where.= " AND reviewCreated LIKE '$cd_mask%'";

// connect to the database

$db = mysql_pconnect(host,user,pass)

or die("Connection Error: " . mysql_error());

mysql_select_db("products") or die("Error conecting to db.");

$result = mysql_query("SELECT COUNT(*) AS count FROM products.Reviews ".$where);

$row = mysql_fetch_array($result,MYSQL_ASSOC);

$count = $row['count'];

if( $count >0 ) {

$total_pages = ceil($count/$limit);

} else {

$total_pages = 0;

}

if ($page > $total_pages) $page=$total_pages;

if ($limit<0) $limit = 0;

$start = $limit*$page - $limit; // do not put $limit*($page - 1)

if ($start<0) $start = 0;

$SQL = "SELECT productId, starValue, reviewCreated FROM products.Reviews ".$where." ORDER BY $sidx $sord LIMIT $start , $limit";

$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());

$responce->page = $page;

$responce->total = $total_pages;

$responce->records = $count;

$i=0;

while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {

$responce->rows[$i]['id']=$row["productId"];

$responce->rows[$i]['cell']=array($row["productId"],$row["starValue"],$row["reviewCreated"]);

$i++;

}

echo json_encode($responce);

mysql_close($db);

?>

POST response from php file (credit to firebug) Note that I removed a bunch of products from the json in order to save space in this post:

POST http://localhost/DataGrid/ReviewRetrieval.php

200 OK

130ms

jquery-....min.js (line 4)

HeadersPostResponseHTML

<br />

<font size='1'><table class='xdebug-error xe-deprecated' dir='ltr' border='1' cellspacing='0' cellpadding='1'>

<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Deprecated: mysql_pconnect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:\wamp\www\DataGrid\ReviewRetrieval.php on line <i>27</i></th></tr>

<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>

<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>

<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>259552</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\DataGrid\ReviewRetrieval.php' bgcolor='#eeeeec'>..\ReviewRetrieval.php<b>:</b>0</td></tr>

<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>260936</td><td bgcolor='#eeeeec'><a href='http://www.php.net/function.mysql-pconnect' target='_new'>mysql_pconnect</a>

( )</td><td title='C:\wamp\www\DataGrid\ReviewRetrieval.php' bgcolor='#eeeeec'>..\ReviewRetrieval.php<b>:</b>27</td></tr>

</table></font>

<br />

<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>

<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: Creating default object from empty value in C:\wamp\www\DataGrid\ReviewRetrieval.php on line <i>47</i></th></tr>

<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>

<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>

<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>259552</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\DataGrid\ReviewRetrieval.php' bgcolor='#eeeeec'>..\ReviewRetrieval.php<b>:</b>0</td></tr>

</table></font>

{"page":1,"total":203,"records":"101345","rows":[{"id":"10000","cell":["10000","3",null]},{"id":"10000","cell":["10000","2",null]},{"id":"10000","cell":["10000","1",null]},{"id":"10000","cell":["10000","1",null]},{"id":"10000","cell":["10000","5",null]},{"id":"10000","cell":["10000","3",null]},{"id":"10000","cell":["10000","4",null]},{"id":"10000","cell":["10000","5",null]},{"id":"10000","cell":["10000","3",null]},{"id":"10000","cell":["10000","5",null]},{"id":"10000","cell":["10000","1",null]},{"id":"10000","cell":["10000","2",null]},{"id":"10000","cell":["10000","5",null]}]}

网友答案:

I figured out the problem. The POST response contains a bunch of junk error messages. I had to set the following value in php.ini:

error_reporting = E_ERROR
分享给朋友:
您可能感兴趣的文章:
随机阅读: