La grille de données EasyUi implémente la table paging_jquery

1. Présentez d'abord les fichiers css et js d'easyui

2. Les js qui doivent être écrits à la réception

Copier le code Le code est le suivant :

//Données sources
fonction Async (action, arguments, rappel) {
$.ajax({
url : action,
​tapez :"POST",
​dataType : "json",
Délai d'expiration : 10000,
données : arguments,
Succès : fonction(données){
​​si(rappel){
​ rappel(données);
}
}
});
>
// Lier les données et définir la pagination
fonction BingData(pid,args,action,callback){
Async(action,arguments,fonction(données){
si(data!=null&&data.list!=null){
var _dataCount=data.size;//Nombre total d'éléments
var _data=data.list;//data
si(rappel){
rappel(_data);
>
$(pid).datagrid('loadData', _data);
$(pid).datagrid('getPager').pagination({
beforePageText : 'th',
afterPageText : 'Page {pages}',
displayMsg : 'Affichage actuel de {from} - {to} enregistrements, un total de {total} enregistrements',
pageSize : args.pageSize,
total : _dataCount,
numéro de page : args.pageIndex,
pageList : args.pageList,
onSelectPage : fonction (pageNumber, pageSize) {
args.pageIndex = numéro de page;
args.pageSize = pageSize;
BingData(pid, arguments, action,null);
},
onRefresh : fonction (pageNumber, pageSize) {
args.pageIndex = numéro de page;
args.pageSize = pageSize;
BingData(pid, arguments, action,null);
>
});
>
});
>
//Sérialise le formulaire en objet
$.fn.serializeObject = fonction(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.nom, v = o.value;
obj[n] = obj[n] === non défini v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return JSON.stringify(obj);
};
//Largeur
fonction fixWidth (pour cent) {
return document.body.clientWidth * percent ;
>
//Fin de l'édition
fonction endEdit(vid){
vid = "#" vid;
var tb=$(vid);
var lignes = tb.datagrid('getRows');
pour ( var i = 0; i < rows.length; i ) {
tb.datagrid('endEdit', i);
>
>
fonction GetData(obj){
var url = contextPath '/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';//chemin d'action
var args={};
args.pageIndex=1;//Index des pages
args.pageSize=10;//Capacité des pages
if(obj!=null){ //Former un objet sérialisé
args.obj=obj;
>
BingData("#tab",args,url,null);
>
fonction getTab(){
GetData();
var tb=$('#tab');
tb.datagrid({
title : 'Résultats de la requête par lots de retour de fonds',
rayé : vrai,
fitColumns : true, //Taille de colonne adaptative
numéros de ligne : vrai,
nowrap: true, //Défini sur true, lorsque la longueur des données dépasse la largeur de la colonne, elles seront automatiquement interceptées
rayé : vrai,
largeur:fixWidth(0.99),
hauteur : '430',
singleSelect : vrai,
loadMsg : 'Chargement des données...',
colonnes :[[
{field:'interfaceInfoCode',title:'Capital Channel Code',width:fixWidth(0.3),align: "center"},
              {field:'retreatBatchCode',title:'Numéro de lot de retour de fonds',width:fixWidth(0.2),editor:'text',align: "center"},
                                                                                                                                                                                  {field:'totalMoney',title:'montant 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",
formateur :fonction (valeur,ligne,index){
　　var vcode =row.retreatBatchCode;
　　var e = 'Détails 　　var d = 'Audit réussi 　　var f = 'Rejet d'audit 　　retour e d f;
　　}}
]],
onLoadSuccess:fonction(données){
​si (data.total == 0) {
}
},
Pagination : vrai,
pageIndex:1,//Index des pages
pageSize:10,//Capacité des pages
Liste des pages : [10,15,20]
})
>

2 coulisses

Copier le code Le code est le suivant :

int currentPage = request.getParameter("pageIndex") == null 1 : Integer.parseInt(request.getParameter("pageIndex"));
//Nombre de lignes par page
int showCount = request.getParameter("pageSize") == null ? // Entité de pagination
Chaîne obj = request.getParameter("obj");
if (StringUtils.notBlank(obj)) {
fundRetreatVoucher = JsonUtils.toObject(obj, FundRetreatVoucherParam.class); //Convertir un objet json sérialisé en entité
>
out = réponse.getWriter();
Liste frvs = fundRetreatVoucherService.findAllFundRetreatVoucher(page, fundRetreatVoucher);
int total = fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(), fundRetreatVoucher).size();//taille des données
JSONObject json = new JSONObject();
json.put("list", frvs);//Data, la clé de put ici doit être list Si elle est modifiée, vous devez modifier les données dans BingData
. json.put("taille", total);
out.print(json);