基于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 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
vue-star评星组件开发实例
Mar 01 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
详解Vue数据驱动原理
Nov 17 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
网页常用特效代码整理
2006/06/23 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python yield使用方法示例
2013/12/04 Python
Python内置数据类型详解
2014/08/18 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
python+opencv实现车道线检测
2021/02/19 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
医学毕业生自荐信
2013/10/11 职场文书
校园达人秀策划书
2014/01/12 职场文书
高一物理教学反思
2014/01/24 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
表彰先进的通报
2014/01/31 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
税务会计岗位职责
2014/02/18 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
离职信范本
2015/06/23 职场文书