EasyUI Pagination如何实现分页功能getPager
作者：赵晓霞
这篇文章主要介绍了EasyUI Pagination如何实现分页功能getPager问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
EasyUI Pagination实现分页功能getPager
查看了一边EasyUI 官网对于分页功能的编写，刚开始使用easyui时发现其中有很多自己不理解的地方，还好帮我们做了很多函数的封装，供我们直接调用就可以了，更好的使用在网页中，对于新手更是很好理解。
便于操作和更改，下面我们对于分页做一次详细的解剖，在工作中遇到各种坑，发现一套完整的功能讲解，并献上代码，以供各位指正。
1.第一步通过标记创建分页（pagination）data-options里面的内容可参考官网的API根据需要添加。
<table id="recordDatagrid" class="easyui-datagrid" style="width: 100%; height: 500px" data-options=" fitColumns:true, autoRowHeight:false, pagination:true, singleSelect:true, nowrap:false, showRefresh:false, striped:true, rownumbers:true"> <thead> <tr> <th data-options="field:'number'" sortable="true" style="width: 14%">AI智能</th> </tr> </thead> </table>
2.第二步使用 javascript 创建分页（pagination）。
$(function($) {getPager_DataGrid('recordDatagrid');//获取table分页的id
initDataTables(1,10,"y");});//页面进入就执行//回调函数3.第三步使用 处理ajax请求回来的数据操作如下。
function initDataTables(pageNumber, pageSize,isNew) {$.ajax({
type: "get",
dataType: "json",
data:"&pageNumber="+ pageNumber
+"&pageSize="+ pageSize,//传页数
url: '/storeManageController/list',//填写地址
beforeSend:function(){//数据传输中显示框
$.messager.progress({
title:'请稍等',
interval:50,
text:'数据加载中...'
});
},
success: function(json){
//console.log("json"+JSON.stringify(json));
$('#recordDatagrid').datagrid('loadData', json);
if(isNew == "y"){//获取第一页，页面刷新时显示第一页内容
var p = $('#recordDatagrid').datagrid('getPager');
$(p).pagination({
pageNumber:1
});
}
$.messager.progress('close');//显示框关闭
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$.messager.progress('close');
}
});});4.第四步使用，这里从ajax传回的数据处理完之后，页面显示的分页此时是英文显示，我们还需要做一步处理，easyui已经帮我们做好了封装的函数，这一步直接粘贴复制就可以了，对应好table的id的名字。
function getPager_DataGrid(datagridID){//这里我们要对照第二步的函数名一致
var p = $('#'+datagridID+'').datagrid('getPager');
$(p).pagination({
pageSize:10,
pageList:[10,30,50],
beforePageText:'第',
afterPageText:'页 共{pages}页',
displayMsg:'当前显示{from} - {to}条记录 共{total}条记录',
onSelectPage:function(pageNumber, pageSize){
initDataTables(pageNumber, pageSize, "n");//我们回调函数，通过ajax请求，返回参数
}
});
}这就是全部的代码，希望你们能够看懂
easyui控件，如何使用分页功能
//定义两个全局变量,用于存放最新的pageSize和pageNumber，在datagrid加载完毕函数中，捕捉列表页各种动作并记录当前页和页面条数
//根据新的页码和页面条数，刷新数据
var dgPageNumber=1;//初始页码
var dgPageSize=10;//初始页记录数
$("#dg").datagrid({
pagination:true,
pageNumber:dgPageNumber,
pageSize:dgPageSize,
onLoadSuccess:function(data){
$("#dg").datagrid('getPager').pagination({
onRefresh:function(pageNumber,pageSize){
dgPageNumber=pageNumber;
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:pageNumber,
pageSize:pageSize
});
//页码刷新后，数据要刷新，重新根据新页码查询数据
//loadData()
},
onChangePageSize:function(pageSize){
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:dgPageNumber,
pageSize:pageSize
});
//页面承载条数改变，数据也要刷新
//loadData()
},
onSelectPage:function(pageNumber,pageSize){
dgPageNumber=pageNumber;
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:pageNumber,
pageSize:pageSize
});
//页码改变，数据也要刷新
//loadData()
}
})
}
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。