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

作者:夜鬼 时间:2024-05-28 15:40:53 

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

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

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

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

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


public class people{
public string name{get;set;}=string.Empty;
public int age{get;set;}=0;
}
//获取的数据是
List<people> plist;
//JsonConvert.SerializeObject()为序列化对象
return Json(JsonConvert.SerializeObject(plist));

1.前端分页


//引用分页控件
<link rel="stylesheet" type="text/css" href="/content/H-UI.Admin/lib/laypage/1.2/skin/laypage.css" />
<script type="text/javascript" src="~/content/H-UI.Admin/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
$(function(){
//获取数据
$.post("/liveajax/getData",function(data){
var loaddata=jQuery.parseJSON(data);//将后台获取的json对象转换为数组
loadData(loaddata);  
})
})
function loadData(data){
var nums = 10; //每页出现的数量

//模拟渲染
var render = function(data, curr){
var arr = [],thisData = data.concat().splice(curr*nums-nums, nums);
for(var i = 0; i < thisData.length; i++){
var str ='<tr><td>thisData[i].name</td><td>thisData[i].age</td></tr>';//拼装一行数据
arr.push(str);
}
return arr.join('');
};
laypage({
cont: 'page'//分页显示的位置
,pages: Math.ceil(data.length/nums) //得到总页数
,jump: function(obj){

document.getElementById('pageBody').innerHTML = render(data, obj.curr);//pageBody:分页内容的位置
}
});
}
</script>

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


//引用分页控件
<link rel="stylesheet" type="text/css" href="/content/H-UI.Admin/lib/laypage/1.2/skin/laypage.css" />
<script type="text/javascript" src="~/content/H-UI.Admin/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
//@ViewBag.TotalCount为数据总数,在初始化时就先获取
$(function () {
resetPage(@ViewBag.TotalCount, 1);
});

//约定:queryPara(参数)、pageQuery(查询方法)、resetPage(重置分页)

//查询参数
var queryPara = {
page:1,//页码
psize:10,//行数
};
//分页查询
function pageQuery() {
var queryUrl = ‘/liveajax/getData2';
$.post(queryUrl, queryPara, function (data) {
 $("table.dataTable tbody").html(data);//这里直接可以将对象拼装,或者使用分部视图,将data作为model参数传入分部式图
 resetPage(@ViewBag.TotalCount, queryPara.page);
});
}
//重置分页(跳转分页)
function resetPage(recordCount, pageIndex) {
var pages = recordCount % queryPara.psize == 0 ? recordCount / queryPara.psize : recordCount / queryPara.psize + 1;
laypage({
 cont: "page", //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
 pages: pages, //通过后台拿到的总页数
 curr: pageIndex, //当前页
 jump: function (obj, first) { //触发分页后的回调
 if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
  queryPara.page = obj.curr;
  pageQuery();
 }
 }
});
}
</script>

来源:https://blog.csdn.net/qq_31117007/article/details/71156867

标签:layPage,分页
0
投稿

猜你喜欢

  • php 常用类整理

    2024-05-09 14:46:57
  • Python文本处理之按行处理大文件的方法

    2023-01-24 11:11:34
  • Python实现一个简单三层神经网络的搭建及测试 代码解析

    2021-10-09 23:59:20
  • python自动化调用百度api解决验证码

    2023-03-18 19:21:27
  • 概念性产品设计

    2008-06-11 12:57:00
  • 关于SQL Server数据库备份和恢复特性介绍

    2009-02-19 16:57:00
  • Python中音频处理库pydub的使用教程

    2023-07-15 20:22:54
  • mysql学习笔记之表的基本操作

    2024-01-20 03:11:16
  • php的对象传值与引用传值代码实例讲解

    2023-11-06 08:42:37
  • MySql新手入门的基本操作汇总

    2024-01-23 15:10:19
  • 用Python实现定时备份Mongodb数据并上传到FTP服务器

    2021-09-09 03:40:02
  • python+matplotlib演示电偶极子实例代码

    2021-07-09 12:52:35
  • asp如何最大限度地实现安全登录功能?

    2010-07-11 21:11:00
  • python使用心得之获得github代码库列表

    2023-12-01 21:31:51
  • Python查询IP地址归属完整代码

    2022-10-18 16:39:07
  • 如何用python多次调用exe文件运行不同的结果

    2023-07-08 03:01:24
  • python中Genarator函数用法分析

    2023-01-03 16:50:52
  • Dreamweaver初学者常见问题解答

    2007-02-03 11:39:00
  • python模拟点击网页按钮实现方法

    2021-06-18 21:13:09
  • MySQL关于sql_mode解析与设置讲解

    2024-01-25 00:40:59
  • asp之家 网络编程 m.aspxhome.com