前些天用jquery easyui的table easyui-datagrid做分頁顯示的時候，折騰了很久塞帐，后來終于解決了纫溃。其實不難，最主要我不是很熟悉前端的東西赁酝。
table easyui-datagrid分頁 有一個附加的分頁控件犯祠，只需后臺獲取分頁控件自動提交的兩個參數(shù)rows（每頁顯示的記錄數(shù)）和page（當(dāng)前第幾頁）然后讀取相應(yīng)頁數(shù)的記錄，和總記錄數(shù)total一塊返回即可酌呆。
1.界面
2.前端代碼
<table id="dg" title="文章管理" class="easyui-datagrid" fitColumns="true" pagination="true"
url="${pageContext.request.contextPath}/admin/showAllTrainee" toolbar="#tb" rownumbers="true">
<thead>
<tr>
<th field="cb" checkbox="true" align="center"></th>
<th field="tid" width="20" align="center" hidden="true"></th>
<th field="title" width="200" formatter="formatTitle">標(biāo)題</th>
<th field="time" width="100" align="center">發(fā)布日期</th>
<th field="tname" width="100" align="center">實習(xí)生姓名</th>
<th field="major" width="100" align="center">專業(yè)</th>
<th field="view_num" width="30" align="center">閱讀量</th>
<th field="aname" width="100" align="center">發(fā)布者</th>
</tr>
</thead>
</table>
3.后端我用的是springmvc處理數(shù)據(jù)衡载，返回json串
package com.jyb.pojo;
/**
*
* @author
* @時間 2016-08-06
*
*/
public class Page {
private int page; //當(dāng)前第幾頁
private int rows; //每頁顯示記錄數(shù)
private int firstPage; //第幾條記錄起始
public Page(int page, int rows){
this.page = page;
this.rows = rows;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getFirstPage() {
firstPage = (page - 1) * rows;
return firstPage;
}
}
@SuppressWarnings({ "rawtypes", "unchecked" })
@ResponseBody
@RequestMapping(value="/showAllTrainee")
public Map showAllTrainee(@RequestParam(value="page", required=false) String page,
@RequestParam(value="rows", required=false) String rows, @RequestParam(value="title", required=false) String title){
Page pageBean = new Page(Integer.parseInt(page), Integer.parseInt(rows));
Map reMap = new HashMap();
Map paraMap = new HashMap();
paraMap.put("title", title);
paraMap.put("firstPage", pageBean.getFirstPage());
paraMap.put("rows", pageBean.getRows());
try {
List<Map> list = adminService.showAllTrainee(paraMap);
long total = adminService.getTraineeTotal(paraMap);
reMap.put("rows", list); //存放每頁記錄數(shù)
reMap.put("total", total); //存放總記錄數(shù) ，必須的
} catch (Exception e) {
e.printStackTrace();
}
return reMap;
}
其中controller中必須返回json字符串所以加了@ResponseBody注解隙袁。
4.mybatis映射文件
select id="selectTraineeLimit" parameterType="map" resultType="map">
select
trainee.tid,
admin.name aname,
trainee.name tname,
trainee.major,
trainee.time,
trainee.title,
trainee.view_num
from
trainee, admin
<where>
<if test="title != null and title != ''">
and trainee.title like concat('%',#{title},'%')
</if>
and trainee.aid = admin.aid
</where>
order by
trainee.time desc, trainee.tid
limit
#{firstPage},
#{rows};
</select>
<select id="getTraineeTotal" parameterType="map" resultType="long">
select count(tid) from trainee
<where>
<if test="title != null and title != ''">
and trainee.title like concat('%',#{title},'%')
</if>
<if test="name != null and name != ''">
and name like concat('%',#{name},'%')
</if>
<if test="major != null and major != ''">
and major like concat('%',#{major},'%')
</if>
<if test="city != null and city != ''">
and city like concat('%',#{city},'%')
</if>
<if test="company != null and company != ''">
and company like concat('%',#{company},'%')
</if>
<if test="title != null and title != ''">
and title like concat('%',#{title},'%')
</if>
</where>
</select>
其他代碼就不上了痰娱，特寫出重點的方便自己或別人作為參考。如果有什么問題大家可以留言菩收，我看見了會解答梨睁。
附：
table easyui-datagrid 生成一個表格。 屬性如下：
1)title:該DataGrid面板的標(biāo)題文本娜饵。
2)iconCls:一個CSS類坡贺，將提供一個背景圖片作為標(biāo)題圖標(biāo)。
3)border：當(dāng)true時箱舞，顯示該datagrid面板的邊框遍坟。
4)width:面板寬度，自動列寬褐缠。
5)height:面板高度政鼠，自動列高。
6)columns:該DataGrid列配置對象队魏，查看column屬性可獲取更多信息公般。
7)frozenColumns:跟Columns屬性相同，但是這些列將會被固定在左邊胡桨。
8)striped:當(dāng)true時官帘，單元格顯示條紋。默認(rèn)false昧谊。
9)method:通過該方法類型請求遠程數(shù)據(jù)刽虹。默認(rèn)post。
10)nowrap:當(dāng)true時呢诬，顯示數(shù)據(jù)在同一行上涌哲。默認(rèn)true胖缤。
11)idField:說明哪個字段是一個標(biāo)識字段。
12)url:一個URL阀圾，從遠程站點獲取數(shù)據(jù)哪廓。
13)loadMsg:當(dāng)從遠程站點加載數(shù)據(jù)時，顯示一個提示信息初烘。默認(rèn)"Processing,please wait …"涡真。自定義覆蓋。
14)pagination:當(dāng)true時在DataGrid底部顯示一個分頁工具欄肾筐。默認(rèn)false哆料。
15)rownumbers:當(dāng)true時顯示行號。默認(rèn)false吗铐。
16)singleSelect:當(dāng)true時只允許當(dāng)前選擇一行东亦。默認(rèn)false。
17)fit:當(dāng)true時抓歼，設(shè)置大小以適應(yīng)它的父容器讥此。默認(rèn)false。
18)pageNumber:當(dāng)設(shè)置分頁屬性時谣妻，初始化的頁碼編號萄喳。默認(rèn)從1開始
19)pageSize:當(dāng)設(shè)置分頁屬性是，初始化的頁面大小蹋半。默認(rèn)10行
20)pageList:當(dāng)設(shè)置分頁屬性時他巨，初始化頁面的大小選擇清單。默認(rèn)[10,20,30,40,50]
21)queryParams:當(dāng)請求遠程數(shù)據(jù)時减江，也可以發(fā)送額外的參數(shù)染突。
22)sortName:定義哪列可以排序。
23)sortOrder:定義列的排列順序辈灼，只能是'asc'或'desc'份企。默認(rèn)asc。
Column屬性如下：
1)title:該列標(biāo)題文本巡莹。
2)field:該列對應(yīng)的字段名稱司志。
3)width：列寬。
4)rowspan:說明該單元格需要多少行數(shù)降宅。
5)colspan:說明該單元格需要多少列數(shù)骂远。
6)align:說明Column數(shù)據(jù)的對齊方式。'left'腰根，'right'激才，'center' 都可以使用。
7)sortable:當(dāng)true時，允許該列進行排序瘸恼。
8)checkbox:當(dāng)true時劣挫，允許該列出現(xiàn)checkbox。
事件如下：
1)onLoadSuccess:當(dāng)遠程數(shù)據(jù)加載成功是激活钞脂。
2)onLoadError:當(dāng)遠程數(shù)據(jù)加載發(fā)現(xiàn)一些錯誤時激活揣云。
3)onClickRow:當(dāng)用戶點擊某行時激活，參數(shù)包含：
rowIndex: 點擊的行索引冰啃，從0開始。
rowData: 點擊行時對應(yīng)的記錄刘莹。
4)onDblClickRow:當(dāng)用戶雙擊某行時激活阎毅，參數(shù)包含：
rowIndex: 點擊的行索引，從0開始点弯。
rowData: 點擊行時對應(yīng)的記錄扇调。
5)onSortColumn:當(dāng)用戶對某列排序時激活，參數(shù)包含：
sort:排序字段名稱抢肛。
order:排序字段類型狼钮。
6)onSelect:當(dāng)用戶選擇某行時激活，參數(shù)包含:
rowIndex: 點擊的行索引捡絮，從0開始熬芜。
rowData: 點擊行時對應(yīng)的記錄。
7)onUnselect:當(dāng)用戶取消選擇某行時激活福稳，參數(shù)包含:
rowIndex: 點擊的行索引涎拉，從0開始。
rowData: 點擊行時對應(yīng)的記錄的圆。
方法如下：
1)options:返回選擇對象鼓拧。
2)resize:重調(diào)大小，生成布局越妈。
3)reload:重新加載數(shù)據(jù)季俩。
4)fixColumnSize:固定列大小。
5)loadData:加載本地數(shù)據(jù)梅掠，過去的行會被刪除酌住。
6)getSelected:返回第一個選中行的記錄，若未選返回null瓤檐。
7)getSelections:返回選中的所有行赂韵，當(dāng)沒有選擇記錄時將返回空數(shù)組。
8)clearSelections:清除所有選項的選擇狀態(tài)挠蛉。
9)selectRow:選擇一行祭示，行索引從0開始。
10)selectRecord:通過傳遞一個ID值參數(shù)，選擇一行质涛。
11)unselectRow:取消選擇一行稠歉。
