NOTICE: Since posting this, I've found the culprit. The code responsible for the failure to load rows past row 400 was due to an improper value in the XML that my php/get_grid_data.php file was generating. The "total" element in the XML is supposed to hold the total number of rows in the database table. Instead, my code was supplying the number of rows returned from the query for the page being viewed. Changing the "total" element to the total number of rows in the table fixed the issue! I'm leaving the error in place here for illustration. Here's the relevant PHP source code:
// create the XML
$s = "<?xml version='1.0' encoding='utf-8'?>\n";
$s .= "<rows>\n";
$s .= " <page>" . $page . "</page>\n";
$s .= " <total>" . count ($rows) . "</total>\n"; // this is WRONG!!!
//$s .= " <total>" . $totalpages . "</total>\n"; // this is RIGHT!
$s .= " <records>" . $totalpages . "</records>\n";
This web page loads a sample mySQL database into a jQuery jqGrid table. The table is configured to use a feature called "True Scrolling Rows" that was added in version 3.6. The feature is supposed to allow you to load a certain number of rows into the table at a time, loading them as needed, as the user scrolls the table.
It seems there is a bug in the "True Scrolling Rows" feature, though. Notice that the table above will load only up to row 400. After that, the grid no longer calls the PHP to load more rows!
So I have created this test page to show the problem and give access to all of the code used to create it, in the hopes someone can help. : )
This entire web page, including all required libraries and files, is available for download here:
grid_test.zip
Here I will describe each of the components of this web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>grid_test</title> <link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8rc3.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <script type="text/javascript" language="javascript" src="javascript/jquery-1.4.2.min.js"></script> <script type="text/javascript" language="javascript" src="javascript/jquery-ui-1.8rc3.custom.min.js"></script> <script type="text/javascript" language="javascript" src="javascript/i18n/grid.locale-en.js"></script> <script type="text/javascript" language="javascript" src="javascript/jquery.jqGrid.min.js"></script> <script type="text/javascript" language="javascript" src="javascript/index.js"></script> </head> <body> <h1>jqGrid Test Table</h1> <table id="my_grid"></table> <div id="my_grid_pager"></div> </body> </html>
jQuery(document).ready
(
function()
{
my_grid = jQuery("#my_grid").jqGrid({
url: 'php/get_grid_data.php',
datatype: 'xml',
mtype: 'POST',
colNames:
[
'ID',
'Word'
],
colModel:
[
{name:'id', index:'id', width:60, key:true},
{name:'word', index:'word', width:400}
],
scroll: 1,
pager: '#my_grid_pager',
height: "200",
gridview: true,
viewrecords: true,
rowNum: 20,
sortname: 'id',
sortorder: 'asc',
emptyrecords: 'Nothing to display',
caption: ''
});
jQuery("#my_grid").navGrid('#my_grid_pager',{edit:false, add:false, del:false, refresh:true});
}
);