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 相关文章推荐
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
vue 项目接口管理的实现
Jan 17 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php提高网站效率的技巧
2015/09/29 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
详解Python如何生成词云的方法
2018/06/01 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python实现的自动发送消息功能详解
2019/08/15 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
投标单位介绍信
2014/01/09 职场文书
美发活动策划书
2014/01/14 职场文书
报告会主持词
2014/04/02 职场文书
环保倡议书300字
2014/05/15 职场文书
三八节标语
2014/06/27 职场文书
公证书格式
2015/01/23 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python