| 代码如下 | 复制代码 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" media="screen" href="js/themes/basic/grid.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jqGrid.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#myTab").jqGrid({ //myTab:装在数据的table id datatype: "json", //将这里改为使用JSON数据 url:'DataServlet', //这是数据的请求地址 height: 250, width: 400, colNames:['编号','姓名', '电话'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'name',index:'name', width:90}, {name:'phone',index:'phone', width:100} ], pager: 'pager', //分页工具栏，pager:分页DIV的id imgpath: 'js/themes/basic/images', //图片存放路径 rowNum:10, //每页显示记录数 viewrecords: true, //是否显示行数 rowList:[10,20,30], //可调整每页显示的记录数 multiselect: false, //是否支持多选 caption: "信息显示" }); }); </script> </head> <body> <table id="myTab" class="scroll" cellpadding="0" cellspacing="0"></table> <div id="pager" class="scroll"></div> </body> </html> |
|
后台的servlet，里面的数据是模拟的
Java代码
| 代码如下 | 复制代码 |
| public class DataServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String page = request.getParameter("page"); // 取得当前页数,注意这是jqgrid自身的参数 String rows = request.getParameter("rows"); // 取得每页显示行数，,注意这是jqgrid自身的参数 int totalRecord = 80; // 总记录数(应根据数据库取得，在此只是模拟) int totalPage = totalRecord % Integer.parseInt(rows) == 0 ? totalRecord / Integer.parseInt(rows) : totalRecord / Integer.parseInt(rows) + 1; // 计算总页数 try { int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows); // 开始记录数 int pageSize = Integer.parseInt(rows); // 以下模拟构造JSON数据对象 String json = "{total: " + totalPage + ", page: " + page + ", records: " + totalRecord + ", rows: ["; for (int i = index; i < pageSize + index && i < totalRecord; i++) { json += "{cell:['ID " + i + "','NAME " + i + "','PHONE " + i + "']}"; if (i != pageSize + index - 1 && i != totalRecord - 1) { json += ","; } } json += "]}"; response.getWriter().write(json); // 将JSON数据返回页面 } catch (Exception ex) { } } } |
|
时间： 2024-10-29 20:34:22