前些天用jquery easyui的table easyui-datagrid做分頁顯示的時候，折騰了很久，后來終于解決了。其實不難，最主要我不是很熟悉前端的東西。
table easyui-datagrid分頁 有一個附加的分頁控件，只需后臺獲取分頁控件自動提交的兩個參數(shù)rows（每頁顯示的記錄數(shù)）和page（當前第幾頁）然后讀取相應頁數(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">標題</th>
<th field="time" width="100" align="center">發(fā)布日期</th>
<th field="tname" width="100" align="center">實習生姓名</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; //當前第幾頁
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面板的標題文本。
2)iconCls:一個CSS類，將提供一個背景圖片作為標題圖標。
3)border：當true時，顯示該datagrid面板的邊框。
4)width:面板寬度，自動列寬。
5)height:面板高度，自動列高。
6)columns:該DataGrid列配置對象，查看column屬性可獲取更多信息。
7)frozenColumns:跟Columns屬性相同，但是這些列將會被固定在左邊。
8)striped:當true時，單元格顯示條紋。默認false。
9)method:通過該方法類型請求遠程數(shù)據(jù)。默認post。
10)nowrap:當true時，顯示數(shù)據(jù)在同一行上。默認true。
11)idField:說明哪個字段是一個標識字段。
12)url:一個URL，從遠程站點獲取數(shù)據(jù)。
13)loadMsg:當從遠程站點加載數(shù)據(jù)時，顯示一個提示信息。默認"Processing,please wait …"。自定義覆蓋。
14)pagination:當true時在DataGrid底部顯示一個分頁工具欄。默認false。
15)rownumbers:當true時顯示行號。默認false。
16)singleSelect:當true時只允許當前選擇一行。默認false。
17)fit:當true時，設置大小以適應它的父容器。默認false。
18)pageNumber:當設置分頁屬性時，初始化的頁碼編號。默認從1開始
19)pageSize:當設置分頁屬性是，初始化的頁面大小。默認10行
20)pageList:當設置分頁屬性時，初始化頁面的大小選擇清單。默認[10,20,30,40,50]
21)queryParams:當請求遠程數(shù)據(jù)時，也可以發(fā)送額外的參數(shù)。
22)sortName:定義哪列可以排序。
23)sortOrder:定義列的排列順序，只能是'asc'或'desc'。默認asc。
Column屬性如下：
1)title:該列標題文本。
2)field:該列對應的字段名稱。
3)width：列寬。
4)rowspan:說明該單元格需要多少行數(shù)。
5)colspan:說明該單元格需要多少列數(shù)。
6)align:說明Column數(shù)據(jù)的對齊方式。'left'，'right'，'center' 都可以使用。
7)sortable:當true時，允許該列進行排序。
8)checkbox:當true時，允許該列出現(xiàn)checkbox。
事件如下：
1)onLoadSuccess:當遠程數(shù)據(jù)加載成功是激活。
2)onLoadError:當遠程數(shù)據(jù)加載發(fā)現(xiàn)一些錯誤時激活。
3)onClickRow:當用戶點擊某行時激活，參數(shù)包含：
rowIndex: 點擊的行索引，從0開始。
rowData: 點擊行時對應的記錄。
4)onDblClickRow:當用戶雙擊某行時激活，參數(shù)包含：
rowIndex: 點擊的行索引，從0開始。
rowData: 點擊行時對應的記錄。
5)onSortColumn:當用戶對某列排序時激活，參數(shù)包含：
sort:排序字段名稱。
order:排序字段類型。
6)onSelect:當用戶選擇某行時激活，參數(shù)包含:
rowIndex: 點擊的行索引，從0開始。
rowData: 點擊行時對應的記錄。
7)onUnselect:當用戶取消選擇某行時激活，參數(shù)包含:
rowIndex: 點擊的行索引，從0開始。
rowData: 點擊行時對應的記錄。
方法如下：
1)options:返回選擇對象。
2)resize:重調(diào)大小，生成布局。
3)reload:重新加載數(shù)據(jù)。
4)fixColumnSize:固定列大小。
5)loadData:加載本地數(shù)據(jù)，過去的行會被刪除。
6)getSelected:返回第一個選中行的記錄，若未選返回null。
7)getSelections:返回選中的所有行，當沒有選擇記錄時將返回空數(shù)組。
8)clearSelections:清除所有選項的選擇狀態(tài)。
9)selectRow:選擇一行，行索引從0開始。
10)selectRecord:通過傳遞一個ID值參數(shù)，選擇一行。
11)unselectRow:取消選擇一行。
