laypage分页控件使用实例详解


Posted in Javascript onMay 19, 2016

在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用。

以下是官网中使用的简单例子:

//以下将以jquery.ajax为例,演示一个异步分页 
$.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义 
 laypage({ 
  cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div> 
  pages: res.pages, //通过后台拿到的总页数 
  curr: 6, //初始化当前页 
  jump: function(e){ //触发分页后的回调 
   $.getJSON('test/demo1.json', {curr: e.curr}, function(res){ 
    e.pages = e.last = res.pages; //重新获取总页数,一般不用写 
    //渲染 
    var view = document.getElementById('view1'); //你也可以直接使用jquery 
    var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示 
    view.innerHTML = res.content + demoContent; 
   }); 
  } 
 }); 
});

一个基本的分页效果也就出来了。

laypage分页控件使用实例详解

如果你需要其他更加绚丽的效果请修改源代码。
先来说下,如果呈现出来一个分页的效果的。
首先呢,引用下控件laypage.js
<script type="text/javascript" src="/lib/laypage/laypage.js"></script> 

插件下载地址:

现在来看看插件的配置:

function SearchJoinMemberInfoPage() { 
 var ccId = parseInt($("#hid_ccid").val(), 10); 
 var saveKey = $("#targetKey").val(); 
 var pageSize = 10; 
 
 //以下将以jquery.ajax为例,演示一个异步分页 
 $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { 
  type: 2, 
  ccId: ccId, 
  pageIndex: 1, 
  pageSize: pageSize, 
  saveKey: saveKey 
 }, 
 function (res) { //从第1页开始请求。返回的json格式可以任意定义 
  laypage({ 
   cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div> 
   pages: res.pageCount, //通过后台拿到的总页数 
   curr: 1, //初始化当前页 
   skin: '#429842',//皮肤颜色 
   groups: 3, //连续显示分页数 
   skip: true, //是否开启跳页 
   first: '首页', //若不显示,设置false即可 
   last: '尾页', //若不显示,设置false即可 
   //prev: '<', //若不显示,设置false即可 
   //next: '>', //若不显示,设置false即可 
   jump: function (e) { //触发分页后的回调 
    $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { 
     type: 2, 
     ccId: ccId, 
     pageIndex: e.curr,//当前页 
     pageSize: pageSize, 
     saveKey: saveKey 
    }, function (res) { 
     e.pages = e.last = res.pageCount; //重新获取总页数,一般不用写 
     //渲染 
     var view = document.getElementById('userTable'); //你也可以直接使用jquery 
     //解析数据 
     var resultHtml = PackagData(res); 
     view.innerHTML = resultHtml; 
    }); 
   } 
  }); 
 }); 
}

 /Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById显示了一个异步的地址,该异步返回需要展示的数据,和页数。type:
 2,ccId: ccId,pageIndex: 1,pageSize: pageSize,saveKey: saveKey则是异步中需要用到的参数就不说了。
PackagData(res);该函数是解析返回的数据并呈现出来。
userTable是用于显示返回的数据的dom节点,page1是用于显示页数的按钮的dom节点。
现在看下效果:

laypage分页控件使用实例详解

其实很简单了,这就完成了一个分页显示了。

谢谢大家的阅读,希望大家继续关注三水点靠木的更多精彩内容。

Javascript 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
动态加载js文件简单示例
Apr 21 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
js多功能分页组件layPage使用方法详解
May 19 #Javascript
深入理解MVC中的时间js格式化
May 19 #Javascript
Node.js+Express配置入门教程详解
May 19 #Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 #Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 #Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 #Javascript
当jquery ajax遇上401请求的解决方法
May 19 #Javascript
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python去掉行尾的换行符方法
2017/01/04 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
python中for in的用法详解
2020/04/17 Python
销售人员中英文自荐信
2013/09/22 职场文书
婚庆答谢词
2015/01/04 职场文书
故宫英文导游词
2015/01/31 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Docker部署Mysql8的实现步骤
2022/07/07 Servers