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.         width: 400,   
  17.         colNames:['编号','姓名', '电话'],   
  18.         colModel:[   
  19.             {name:'id',index:'id', width:60, sorttype:"int"},   
  20.             {name:'name',index:'name', width:90},   
  21.             {name:'phone',index:'phone', width: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代码 复制代码
  1.   
  2. public class DataServlet extends HttpServlet {   
  3.     private static final long serialVersionUID = 1L;   
  4.   
  5.       
  6.     protected void doGet(HttpServletRequest request,   
  7.             HttpServletResponse response) throws ServletException, IOException {   
  8.         // TODO Auto-generated method stub   
  9.     }   
  10.   
  11.       
  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. }  

展现的效果：


posted @ 2011-11-03 17:25  郑文亮  阅读(11809)  评论(0)  编辑  收藏  举报