Easyui DataGrid Implementation Table Paging _jquery

1. First introduce Easyui CSS and JS files

2. The front desk needs to write JS

Copy Code code as follows:

Source data
function Async (action,args,callback) {
$.ajax ({
Url:action,
Type: "POST",
DataType: "JSON",
timeout:10000,
Data:args,
Success:function (data) {
if (callback) {
callback (data);
}
}
});
}
Bind data and set pagination
function Bingdata (pid,args,action,callback) {
Async (action,args,function (data) {
if (data!=null&&data.list!=null) {
var _datacount=data.size;//total number of bars
var _data=data.list;//data
if (callback) {
Callback (_data);
}
$ (PID). DataGrid (' LoadData ', _data);
$ (PID). DataGrid (' Getpager '). Pagination ({
Beforepagetext: ' First ',
Afterpagetext: ' page total {pages} ',
Displaymsg: ' current display {from}-{to} ' record total} record ',
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);
}
});
}
});
}
Form serialization to Object
$.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);
};
Width
function Fixwidth (percent) {
return document.body.clientWidth * percent;
}
End Edit
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 path
var args={};
args.pageindex=1;//Page Index
args.pagesize=10;//page capacity
Object for if (obj!=null) {//form serialization
Args.obj=obj;
}
Bingdata ("#tab", args,url,null);
}
function Gettab () {
GetData ();
var tb=$ (' #tab ');
Tb.datagrid ({
Title: ' Return of money to the batch query results ',
Striped:true,
Fitcolumns:true,//Adaptive column size
Rownumbers:true,
nowrap:true,//is set to True and will be automatically intercepted when the data length exceeds the column width
Striped:true,
Width:fixwidth (0.99),
Height: ' 430 ',
Singleselect:true,
Loadmsg: ' In data loading ... ',
columns:[[
{field: ' Interfaceinfocode ', title: ' Money Channel Code ', Width:fixwidth (0.3), align: "center"},
{field: ' Retreatbatchcode ', title: ' Money back lot number ', width:fixwidth (0.2), Editor: ' Text ', align: ' center '},
{field: ' Total ', title: ' Sum of pens ', width:fixwidth (0.1), align: ' Right ', Editor: ' Text ', align: ' center '},
{field: ' Totalmoney ', title: ' Total Amount ', Width:fixwidth (0.1), align: ' Right ', Editor: ' Text ', align: ' center '},
{field: ' Def2 ', title: ' Operation ', 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+ ') "> Details </a> | ';
var d = ' <a href= ' # "onclick=" Auditbatch (' +index+ ', 0) "> Audit through </a> | ';
var f = ' <a href= ' # "onclick=" Auditbatch (' +index+ ', 1) ' > Audit reject </a> ';
return e+d+f;
}}
]],
Onloadsuccess:function (data) {
if (Data.total = = 0) {
}
},
Pagination:true,
pageindex:1,//Page Index
pagesize:10,//page capacity
PageList: [10,15,20]
})
}

2 Backstage

Copy Code code as follows:

int currentpage = Request.getparameter ("pageIndex") = = null? 1:integer.pars Eint (Request.getparameter ("PageIndex"));
//number of rows per page
int showcount = Request.getparameter ("pageSize") = = null? 10:integer.parseint (Request.getparameter (" PageSize "));
//Paging entity
String obj = request.getparameter ("obj");
if (Stringutils.notblank (obj)) {
   fundretreatvoucher = Jsonutils.toobject (obj, Fundretreatvoucherparam.class); The form serializes a JSON object into an entity
}
out = Response.getwriter ();
List<fundretreatvoucher> Frvs = fundretreatvoucherservice.findallfundretreatvoucher (page, Fundretreatvoucher);
int total = Fundretreatvoucherservice.findallfundretreatvoucher (Gettotal (), fundretreatvoucher). Size ();//Data sizes
Jsonobject json = new Jsonobject ();
Json.put ("list", Frvs);//data, the put key here, must be a list, if the need to change the bingdata in the data to change the
Json.put ("size", total);
Out.print (JSON);