快捷導(dǎo)航

jQuery中jqGrid分頁(yè)實(shí)現(xiàn)代碼

更新時(shí)間：2011年11月04日 17:19:12 作者：

今天看到j(luò)avaeye上有人使用了jqGrid實(shí)現(xiàn)了數(shù)據(jù)的分頁(yè)，參考它的代碼，實(shí)現(xiàn)了這個(gè)功能，搬出來(lái)曬曬，作為自己以后學(xué)習(xí)的資料

（1）頁(yè)面代碼：

復(fù)制代碼代碼如下:

 
<!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({ 
datatype: "json", //將這里改為使用JSON數(shù)據(jù) 
url:'DataServlet', //這是Action的請(qǐng)求地址 
mtype: 'POST', 
height: 250, 
width: 400, 
colNames:['編號(hào)','姓名', '電話'], 
colModel:[ 
{name:'id',index:'id', width:60, sorttype:"int"}, 
{name:'name',index:'name', width:90}, 
{name:'phone',index:'phone', width:100} 
], 
pager: 'pager', //分頁(yè)工具欄 
imgpath: 'js/themes/basic/images', //圖片存放路徑 
rowNum:10, //每頁(yè)顯示記錄數(shù) 
viewrecords: true, //是否顯示行數(shù) 
rowList:[10,20,30], //可調(diào)整每頁(yè)顯示的記錄數(shù) 
multiselect: false, //是否支持多選 
caption: "信息顯示" 
}); 
}); 
</script> 
</head> 
<body> 
<table id="myTab" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll"></div> 
</body> 
</html> 

（2）后臺(tái)的servlet，里面的數(shù)據(jù)是模擬的

復(fù)制代碼代碼如下:

 
/** 
* Servlet implementation class DataServlet 
*/ 
public class DataServlet extends HttpServlet { 
private static final long serialVersionUID = 1L; 

/** 
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse 
* response) 
*/ 
protected void doGet(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
// TODO Auto-generated method stub 
} 

/** 
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse 
* response) 
*/ 
protected void doPost(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
String page = request.getParameter("page"); // 取得當(dāng)前頁(yè)數(shù),注意這是jqgrid自身的參數(shù) 
String rows = request.getParameter("rows"); // 取得每頁(yè)顯示行數(shù)，,注意這是jqgrid自身的參數(shù) 
int totalRecord = 80; // 總記錄數(shù)(應(yīng)根據(jù)數(shù)據(jù)庫(kù)取得，在此只是模擬) 
int totalPage = totalRecord % Integer.parseInt(rows) == 0 ? totalRecord 
/ Integer.parseInt(rows) : totalRecord / Integer.parseInt(rows) 
+ 1; // 計(jì)算總頁(yè)數(shù) 
try { 
int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows); // 開(kāi)始記錄數(shù) 
int pageSize = Integer.parseInt(rows); 
// 以下模擬構(gòu)造JSON數(shù)據(jù)對(duì)象 
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數(shù)據(jù)返回頁(yè)面 
} catch (Exception ex) { 
} 
} 
} 