EasyUi datagrid 實作表格分頁_jquery

1.首先引入 easyui的 css 和 js 檔案

2.前台 需要寫的js

複製程式碼 程式碼如下:

//來源資料
function Async(action,args,callback){
  $.ajax({
　　 url: action ,
 　　type:"POST",
 　　dataType:"json",
 　　timeout: 10000,
 　　data: args,
 　　success: function(data){
 　　  if(callback){
 　　 callback(data);
  　　}
　　}
});
}
//綁定資料 並設定分頁
function BingData(pid,args,action,callback){
Async(action,args,function(data){
if(data!=null&&data.list!=null){
var _dataCount=data.size;//總條數
var _data=data.list;//資料
if(callback){
callback(_data);
}
$(pid).datagrid('loadData', _data);
$(pid).datagrid('getPager').pagination({
beforePageText: '第',
afterPageText: '頁 共 {pages} 頁',
displayMsg: '目前顯示 {from} - {to} 筆記錄 共 {total} 筆記錄',
pageSize: args.pageSize,
total: _dataCount,
pageNumber: args.pageIndex,
pageList:args.pageList,
onSelectPage: function (pageNumber, pageSize) {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData(pid, args, action,null);
},
onRefresh: function (pageNumber, pageSize) {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData(pid, args, action,null);
}
});
}
});
}
//表單序列化為物件
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name, v = o.value;
obj[n] = obj[n] === undefined ? v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return JSON.stringify(obj);
};
//寬度
function fixWidth(percent){
return document.body.clientWidth * percent ;
}
//結束編輯
function endEdit(vid){
vid = "#" vid;
var tb=$(vid);
var rows = tb.datagrid('getRows');
for ( var i = 0; i tb.datagrid('endEdit', i);
 }
}
function GetData(obj){
var url = contextPath '/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';//action路徑
var args={};
args.pageIndex=1;//頁索引
args.pageSize=10;//頁容量
if(obj!=null){  //表單序列化的物件
  args.obj=obj;   
}
BingData("#tab",args,url,null);
}
function getTab(){
GetData();
var tb=$('#tab');
tb.datagrid({
title : '資金退回批次查詢結果',
striped : true,
fitColumns: true, //自適應列的大小
rownumbers: true,
nowrap : true,//設定為true，當資料長度超出列寬時將會自動截取
striped : true,
width:fixWidth(0.99),
height:'430',
singleSelect:true,
loadMsg : '資料裝載中......',
columns:[[
  　　 {field:'interfaceInfoCode',title:'資金通道編碼',width:fixWidth(0.3),align: "center"},
         {field:'retreatBatchCode',title:'資金退回批次號',width:fixWidth(0.2),editor:'text' ,align: "center"},
         {field:'total',title:'總筆數',width:fixWidth(0.1),align:'right',editor:'text' ,align: "center"},   　　　 {field:'totalMoney',title:'總金額',width:fixWidth(0.1),align:'right',editor:'text' ,align: "center"},
          {field:'def2',title:'操作',width:fixWidth(0.3),editor:'text',align:'right' ,align: "center",
　　　　formatter:function(value,row,index){
　　　　var vcode =row.retreatBatchCode;
　　　　var e = '詳情 | ';
　　　　var d = '審核通過 | ';
　　　　var f = '審核拒絕 ';
　　　　return e d f;
　　　　}}
　　 ]],
　　onLoadSuccess:function(data){
　　if (data.total == 0) {
　　}
　　},
　　pagination: true,
　　pageIndex:1,//頁索引
　　pageSize:10,//頁容量
　　pageList: [10,15,20]
　　})
}

2 後台

複製程式碼 程式碼如下:

int currentPage = request.getParameter("pageIndex") == null ? 1 : Integer.parseInt(request.getParameter("pageIndex"));
// 每頁行數
int showCount = request.getParameter("pageSize") == null ? 10 : Integer.parseInt(request.getParameter("pageSize"));
// 分頁實體
String obj = request.getParameter("obj");
if (StringUtils.notBlank(obj)) {
   fundRetreatVoucher = JsonUtils.toObject(obj, FundRetreatVoucherParam.class); //表單序列化json物件轉為實體
}
out = response.getWriter();
List frvs = fundRetreatVoucherService.findAllFundRetreatVoucher(page, fundRetreatVoucher);
int total = fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(), fundRetreatVoucher).size();//資料大小
JSONObject json = new JSONObject();
json.put("list", frvs);//數據，這裡的put的key ,一定要為list，如果改了 需要把 BingData中的 數據改一下
json.put("size", total);
out.print(json);