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


Posted in Javascript onJuly 27, 2019

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

在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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现商品倒计时实现代码
May 03 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
基于ssm框架实现layui分页效果
Jul 27 #Javascript
layUI实现前端分页和后端分页
Jul 27 #Javascript
layui实现数据分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据分页功能
Jul 27 #Javascript
layUI实现列表查询功能
Jul 27 #Javascript
Layui实现带查询条件的分页
Jul 27 #Javascript
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
深入了解js原型模式
2019/05/30 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python实现飞机大战微信小游戏
2020/03/21 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
小学教师读书活动总结
2014/07/08 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
详解python网络进程
2021/06/15 Python