EasyUi datagrid 实现表格分页

前端技术 2023/09/05 JavaScript

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 < rows.length; 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 = \'<a href=\"#\" onclick=\"toDetail(\'+index+\')\">详情</a> | \';
    var d = \'<a href=\"#\" onclick=\"auditBatch(\'+index+\',0)\">审核通过</a> | \';
    var f = \'<a href=\"#\" onclick=\"auditBatch(\'+index+\',1)\">审核拒绝</a> \';
    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<FundRetreatVoucher> 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);

本文地址:https://www.stayed.cn/item/12458

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。