好资源导航 » 文章资讯 » 基于layPage插件实现两种分页方式浅析

基于layPage插件实现两种分页方式浅析

2023-08-18 13:28:04 198

最近在开发过程中经常用到分页，今天挤出些时间来捋一捋自己的经验

在web开发中，一般显示数据列表页时，我们会用到分页控件来显示数据。采用分页一般基于两种不同的需求，一种是数据量不算很大，但是在页面展示又显得过长，看起来很不舒服。一种则是因为数据量太过于庞大，无法一次性去数据库将数据读取出来，于是采用分页的形式去将数据分页显示出来。

前者即所谓的前端分页，而后者就是服务端分页。

两者的区别在于：前端分页是将所有数据取出，为方便用户查看，合理展示数据。在前端js上对数据进行分页。而服务端分页是根据当前页面要展示的内容，通过前端传入的参数，获取对应页面的数据进行展示。简而言之就是前端分页是在前端对数据进行分页，服务端分页这是在后台对数据进行分页。

下面分别展示下使用layPage分页控件两者的用法
假设后台返回的数据对象如下：

publicclasspeople{
publicstringname{get;set;}=string.Empty;
publicintage{get;set;}=0;
}
//获取的数据是
Listplist;
//JsonConvert.SerializeObject()为序列化对象
returnJson(JsonConvert.SerializeObject(plist));

1.前端分页

//引用分页控件




$(function(){
//获取数据
$.post("/liveajax/getData",function(data){
varloaddata=jQuery.parseJSON(data);//将后台获取的json对象转换为数组
loadData(loaddata);
})
})
functionloadData(data){
varnums=10;//每页出现的数量

//模拟渲染
varrender=function(data,curr){
vararr=[],thisData=data.concat().splice(curr*nums-nums,nums);
for(vari=0;i

2.服务端分页：前端传入当前页码、显示数量等请求数据，后台数据库根据分页数据获取对应的数据。即数据库分页查询

//引用分页控件




//@ViewBag.TotalCount为数据总数，在初始化时就先获取
$(function(){
resetPage(@ViewBag.TotalCount,1);
});

//约定：queryPara（参数）、pageQuery（查询方法）、resetPage（重置分页）

//查询参数
varqueryPara={
page:1,//页码
psize:10,//行数
};
//分页查询
functionpageQuery(){
varqueryUrl=‘/liveajax/getData2';
$.post(queryUrl,queryPara,function(data){
$("table.dataTabletbody").html(data);//这里直接可以将对象拼装，或者使用分部视图，将data作为model参数传入分部式图
resetPage(@ViewBag.TotalCount,queryPara.page);
});
}
//重置分页(跳转分页)
functionresetPage(recordCount,pageIndex){
varpages=recordCount%queryPara.psize==0?recordCount/queryPara.psize:recordCount/queryPara.psize+1;
laypage({
cont:"page",//容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：

pages:pages,//通过后台拿到的总页数 curr:pageIndex,//当前页 jump:function(obj,first){//触发分页后的回调 if(!first){//点击跳页触发函数自身，并传递当前页：obj.curr queryPara.page=obj.curr; pageQuery(); } } }); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于layPage插件实现两种分页方式浅析

热门推荐

随机推荐