JqGrid實現分頁相關
jqGrid預設就提供了分頁的功能，其在實現分頁的時候有兩個隱含的屬性與後臺互動及page(當前頁)，rows（每頁顯示的資料量）；當請求下一頁的時候請求資料頭部預設包含這兩個屬性，如圖：
Page和rows傳到後臺 ，後臺接收。要實現分頁後臺必須要定義分頁相關屬性(Action中)
private ShowByPage pager;//一個工具類
private String page = null;
private String rows = null;
private List<Person> list;
工具類ShowByPage：
package com.iflytek.bo;
import java.util.List;
import com.iflytek.pojo.Person;
public class ShowByPage {//省略getter and setter
private String page;//當前頁
private Integer totalPage;//總頁數
private Integer totalRecords;//總記錄數
private String rows;//每頁要顯示的資料條目
private List<Person>list;//顯示資料來源
public Integer getTotalPage(){
return totalRecords % Integer.parseInt(rows)== 0 ? totalRecords
/Integer.parseInt(rows) : totalRecords / Integer.parseInt(rows)
+ 1; // 計算總頁數
}
}
後臺主要程式碼：
int totalRecord = 80;//此處定義死了，用時從資料庫取
int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rows);
int pageSize = Integer.parseInt(rows);
List<Person> list = GetData.getdata(index,pageSize);
pager.setPage(page);
pager.setRows(rows);
pager.setTotalRecords(totalRecord);
pager.setTotalPage(pager.getTotalPage());
pager.setList(list);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charSet=UTF-8");
printWriter out = response.getWriter();
out.print(JSONUtil.serialize(pager));
out.close();
前臺：
$(function(){
$("#grid_id").jqGrid({
url:'doexecute.action?str=id',
mtype: 'post',
datatype:'json',
height:"auto",
width:600,
loadui:"disable",
colNames:['姓名', '年齡', '地址'],
colModel: [
{name:'name',index:'name', width:150, sorttype:"string",editable:true},
{name:'age',index:'age', width:120,sorttype:"int",editable:true},
{name:'address',index:'address',width:150,sorttype:"string",editable:true}
],
pager:'#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'name',
sortorder:'asc',
viewrecords:true,
jsonReader:{root:"list",
page:"page" ,
total:"totalPage",
records:"totalRecords",
repeatitems : false
},
caption: '員工資訊'
});
jQuery("#grid_id").jqGrid('navGrid','#pager',{add:true,edit:true,view:true,del:true,search:true,refresh:true},
{url:'doexecute.action?str=id' ,closeAfterEdit:true, closeOnEscape:true,left:240},
{url:'doexecute.action?str=id',closeAfterAdd:true, closeOnEscape:true,left:240},
{url:'doexecute.action?str=id',closeAfterEdit:true, closeOnEscape:true,top:90, left:240, resize:false, drag:false},
{url:'doexecute.action?str=id',multipleSearch:true,closeAfterSearch:true, closeOnEscape:true, sopt:['le','ge','bw']},
{closeOnEscape:true, left:240}
);
});