EasyUI?Pagination如何实现分页功能getPager
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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() } }) } })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果,下面小编通过本文给大家分享实现思路及代码,对bootstrap 实现仿知乎前端动态列表效果感兴趣的朋友一起看看吧2016-11-11了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器2012-02-02
最新评论