EasyUI?Pagination如何实现分页功能getPager

 更新时间:2023年04月23日 10:22:28   作者:赵晓霞  
这篇文章主要介绍了EasyUI?Pagination如何实现分页功能getPager问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云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()
}
})
}
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

最新评论

?


http://www.vxiaotou.com