jsonp跨域 +jqGrid+bootstrap翻页

1、引入js,css.<link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.4.css"> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/grid.locale-cn.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.js"></script>

2、声明宽度：<script> $.jgrid.defaults.width = 1000;</script>添加html<table id="jqGrid"></table> <div id="jqGridPager"></div>引入翻页图标

3、添加声明代码：<script type="text/javascript"> $(document).ready(function() { $("#jqGrid").jqGrid({ url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders', mtype: "GET", styleUI: 'Bootstrap', datatype: "jsonp", colModel: [{ label: 'OrderID', name: 'OrderID', key: true, width: 40 }, { label: 'CustomerID', name: 'CustomerID', width: 100 }, { label: 'OrderDate', name: 'OrderDate', width: 100 }, { label: 'Freight', name: 'Freight', width: 100 }, { label: 'ShipName', name: 'ShipName', width:80 } ], viewrecords: true, height: 500, rowNum: 20, total:4000, pager: "#jqGridPager" }); }); </script>代码实例链接: https://pan.baidu.com/s/1fO34st8suQrjlmzq8WB-Nw 密码: a95t