This article mainly introduces how to implement table paging in EasyUidatagrid and provides examples. For more information, see section 1. introduce css and js files in easyui.
2. js to be written at the front end
The code is 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; // The total number of entries.
Var _ data = data. list; // data
If (callback ){
Callback (_ data );
}
$ (Pid). datagrid ('loaddata', _ data );
$ (Pid). datagrid ('getpager'). pagination ({
BeforePageText: 'di ',
AfterPageText: 'Total pages {pages} page ',
DisplayMsg: 'Current {from}-{to} records total {total} Records ',
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 as an 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 editing
Function endEdit (vid ){
Vid = "#" + vid;
Var tb = $ (vid );
Var rows = tb. datagrid ('getrows ');
For (var I = 0; I <rows. length; I ++ ){
Tb. datagrid ('enabled', I );
}
}
Function GetData (obj ){
Var url = contextPath + '/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; // action path
Var args = {};
Args. pageIndex = 1; // page index
Args. pageSize = 10; // page size
If (obj! = Null) {// form serialized object
Args. obj = obj;
}
BingData ("# tab", args, url, null );
}
Function getTab (){
GetData ();
Var tb = $ ('# tab ');
Tb. datagrid ({
Title: 'fund return batch query result ',
Striped: true,
FitColumns: true, // adaptive column size
Rownumbers: true,
Nowrap: true, // set to true. when the data length exceeds the column width, it is automatically truncated.
Striped: true,
Width: fixWidth (0.99 ),
Height: '20140901 ',
SingleSelect: true,
LoadMsg: 'loading data ......',
Columns :[[
{Field: 'interfaceinfocode', title: 'Funding channel code', width: fixWidth (0.3), align: "center "},
{Field: 'retreatbatchcode', title: 'fund return batch no. ', width: fixWidth (0.2), editor: 'text', align: "center "},
{Field: 'total', title: 'Total number', width: fixWidth (0.1), align: 'right', editor: 'text', align: "center "},
{Field: 'totalmoney', title: 'total', 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 = 'detail | ';
Var d = 'approved | ';
Var f = 'review denied ';
Return e + d + f;
}}
],
OnLoadSuccess: function (data ){
If (data. total = 0 ){
}
},
Pagination: true,
PageIndex: 1, // page index
PageSize: 10, // page size
PageList: [10, 15, 20]
})
}
2 Background
The code is as follows:
Int currentPage = request. getParameter ("pageIndex") = null? 1: Integer. parseInt (request. getParameter ("pageIndex "));
// Number of lines per page
Int showCount = request. getParameter ("pageSize") = null? 10: Integer. parseInt (request. getParameter ("pageSize "));
// Paging object
String obj = request. getParameter ("obj ");
If (StringUtils. notBlank (obj )){
FundRetreatVoucher = JsonUtils. toObject (obj, FundRetreatVoucherParam. class); // form serialized json object into entity
}
Out = response. getWriter ();
List Frvs = fundRetreatVoucherService. findAllFundRetreatVoucher (page, fundRetreatVoucher );
Int total = fundRetreatVoucherService. findAllFundRetreatVoucher (getTotal (), fundRetreatVoucher). size (); // data size
JSONObject json = new JSONObject ();
Json. put ("list", frvs); // data. the put key here must be a list. If yes, you need to change the data in BingData.
Json. put ("size", total );
Out. print (json );