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