EasyUi datagrid 实现表格分页

网友投稿 266 2023-08-04


EasyUi datagrid 实现表格分页

1.首先引入 easyui的 css 和 js 文件

2.前台 需要写的js

复制代码 代码如下:

//源数据

function Async(action,args,callback){

  $.ajax({

   url: action ,

   type:"POST",

   dataType:"json",

   timeout: 10000,

   data: args,

   success: function(http://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;//页http://容量

if(obj!=null){  //表单序列http://化的对象

  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'http://,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);


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:bootstrap table 服务器端分页例子分享
下一篇:Java图像处理工具类
相关文章

 发表评论

暂时没有评论,来抢沙发吧~