基于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 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
Bootstrap table使用方法总结
May 10 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php数组一对一替换实现代码
2012/08/31 PHP
php数组键值用法实例分析
2015/02/27 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
vue实现购物车列表
2020/06/30 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
简单了解django索引的相关知识
2019/07/17 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
高中军训感想800字
2014/02/23 职场文书
企业宗旨标语
2014/06/10 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
干部年终考核评语
2015/01/04 职场文书
通讯稿范文
2015/07/22 职场文书
军训后的感想
2015/08/07 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技