基于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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
vue实现简单图片上传
Jun 30 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
基于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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python代码太长换行的实现
2019/07/05 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
商场消防演习方案
2014/02/12 职场文书
人事专员工作职责
2014/02/22 职场文书
培训讲师岗位职责
2014/04/13 职场文书
五分钟演讲稿
2014/04/30 职场文书
阳光体育活动实施方案
2014/05/25 职场文书