В приведенном ниже коде jQuery -jqGrid разбивка на страницы не работает. Буду признателен за любую помощь в решении этой проблемы.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<meta charset="utf-8" />
<title>jq-grid-1000000</title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
.ui-datepicker { z-index: 2000 }
/* set the size of the autocomplete search control*/
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
z-index: 2000;
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
page: 1,
colModel: [
{ label : "Order ID",
name: 'OrderID',
key: true,
width: 75
},
{
label: "Customer ID",
name: 'CustomerID',
width: 150
},
{
label: "Order Date",
name: 'OrderDate',
width: 150,
sorttype:'date'
},
{
label : "Ship Name",
name: 'ShipName',
width: 150
},
{
label: "Freight",
sorttype: 'number',
name: 'Freight',
width: 150
}
],
loadonce: true,
viewrecords: true,
width: 780,
height: "auto",
page: 1,
rowNum: 3,
pager: "#jqGridPager",
gridview: true,
autoencode: true
});
// activate the build in search with multiple option
$('#jqGrid').jqGrid('navGrid',"#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
},
{}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true,
multipleGroup : true,
}
);
});
</script>
</body>
</html>
`