EasyUI Pagination实现分页功能getPager
查看了一边EasyUI 官网对于分页功能的编写,刚开始使用easyui时发现其中有很多自己不理解的地方,还好帮我们做了很多函数的封装,供我们直接调用就可以了,更好的使用在网页中,对于新手更是很好理解。
便于操作和更改,下面我们对于分页做一次详细的解剖,在工作中遇到各种坑,发现一套完整的功能讲解,并献上代码,以供各位指正。
1.第一步通过标记创建分页(pagination)data-options里面的内容可参考官网的API根据需要添加。
AI智能 |
---|
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() } }) } })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。