JQuery中jqGrid分页实现

JQuery中jqGrid分页实现
JQuery中jqGrid分页实现

Html代码：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>Insert title here</title>
6. <link rel="stylesheet" type="text/css" media="screen"
7. href="js/themes/basic/grid.css" />
8. <script type="text/javascript" src="js/jquery.js"></script>
9. <script type="text/javascript" src="js/jquery.jqGrid.js"></script>
10. <script type="text/javascript">
11. jQuery(document).ready(function(){
12. jQuery("#myTab").jqGrid({ //myTab:装在数据的table id
13. datatype: "json", //将这里改为使用JSON数据
14. url:'DataServlet', //这是数据的请求地址
15. height: 250,
16. 400,
17. colNames:['编号','姓名', '电话'],
18. colModel:[
19. {name:'id',index:'id', 60, sorttype:"int"},
20. {name:'name',index:'name', 90},
21. {name:'phone',index:'phone', 100}
22. ],
23. pager: 'pager', //分页工具栏，pager:分页DIV的id
24. imgpath: 'js/themes/basic/images', //图片存放路径
25. rowNum:10, //每页显示记录数
26. viewrecords: true, //是否显示行数
27. rowList:[10,20,30], //可调整每页显示的记录数
28. multiselect: false, //是否支持多选
29. caption: "信息显示"
30. });
31. });
32. </script>
33. </head>
34. <body>
35. <table id="myTab" class="scroll" cellpadding="0" cellspacing="0"></table>
36. <div id="pager" class="scroll"></div>
37. </body>
38. </html>
后台的servlet，里面的数据是模拟的

Java代码
2. public class DataServlet extends HttpServlet {
3. private static final long serialVersionUID = 1L;
6. protected void doGet(HttpServletRequest request,
7. HttpServletResponse response) throws ServletException, IOException {
8. // TODO Auto-generated method stub
9. }
12. protected void doPost(HttpServletRequest request,
13. HttpServletResponse response) throws ServletException, IOException {
14. String page = request.getParameter("page"); // 取得当前页数,注意这是jqgrid自身的参数
15. String rows = request.getParameter("rows"); // 取得每页显示行数，,注意这是jqgrid自身的参数
16. int totalRecord = 80; // 总记录数(应根据数据库取得，在此只是模拟)
17. int totalPage = totalRecord % Integer.parseInt(rows) == 0 ? totalRecord
18. / Integer.parseInt(rows) : totalRecord / Integer.parseInt(rows)
19. + 1; // 计算总页数
20. try {
21. int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows); // 开始记录数
22. int pageSize = Integer.parseInt(rows);
23. // 以下模拟构造JSON数据对象
24. String json = "{total: " + totalPage + ", page: " + page
25. + ", records: " + totalRecord + ", rows: [";
26. for (int i = index; i < pageSize + index && i < totalRecord; i++) {
27. json += "{cell:['ID " + i + "','NAME " + i + "','PHONE " + i
28. + "']}";
29. if (i != pageSize + index - 1 && i != totalRecord - 1) {
30. json += ",";
31. }
32. }
33. json += "]}";
34. response.getWriter().write(json); // 将JSON数据返回页面
35. } catch (Exception ex) {
36. }
37. }
38. }
展现的效果：
相关阅读:
凡人修仙登录页面
 proxysql高可用~ keepalived+proxysql
proxysql 系列 ~ 高可用架构
 mysql 案例 ~timeout相关问题与错误信息
 mysql 案例 ~ mysql字符集与大小写详解
 mysql案例~非常规操作汇总
 mysql原理~创建用户的那些事情
 mysql 案例 ~ 表空间迁移数据与数据导入
 开源统计数据库~行与列的讨论
 mysql 原理 ~ LRU 算法与buffer_pool
原文地址：https://www.cnblogs.com/zhwl/p/2234798.html