基于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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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
Sony CFR 320 修复改造
2020/03/14 无线电
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
javascript string字符串优化问题
2011/07/31 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python Django批量导入数据
2016/03/25 Python
python装饰器实例大详解
2017/10/25 Python
python ansible服务及剧本编写
2017/12/29 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Python页面加载的等待方式总结
2021/02/28 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
人力资源专业推荐信
2013/11/29 职场文书
抄作业检讨书
2014/02/17 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
论文评审意见
2015/06/05 职场文书
生活小常识广播稿
2015/08/19 职场文书
如何写好竞聘报告
2019/04/03 职场文书