Example of EasyUi datagrid table paging, easyuidatagrid

Example of EasyUi datagrid table paging, easyuidatagrid

1. First introduce css and js files of easyui

2. js to be written at the front end

// 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 = '<a href = "#" onclick = "toDetail (' + index + ')"> details </a> | ';
Var d = '<a href = "#" onclick = "auditBatch (' + index + ', 0)"> approved </a> | ';
Var f = '<a href = "#" onclick = "auditBatch (' + index + ', 1)"> rejected </a> ';
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

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 <FundRetreatVoucher> 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 );