最近发现一个特别好用的前端分页插件，分享一下

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>layPage demo</title>
 <meta name="keywords" content="分页插件,ajax分页,异步分页">
 <meta name="description" content="laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及信息流加载，并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给laypage吧！">
 </head>
 <body>

 <ul id="biuuu_city_list"></ul>

 <div id="biuuu_city"></div>

 <script type="text/javascript">
 /*960*90*/
 var cpro_id = "u2471221";
 </script>
 <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>

 <script src="http://res.layui.com/lay/lib/laypage/laypage.js"></script>
 <script>

 //测试数据
 var data = [
     '北京',
     '上海',
     '广州',
     '深圳',
     '杭州',
     '长沙',
     '合肥',
     '宁夏',
     '成都',
     '西安',
     '南昌',
     '上饶',
     '沈阳',
     '济南',
     '厦门',
     '福州',
     '九江',
     '宜春',
     '赣州',
     '宁波',
     '绍兴',
     '无锡',
     '苏州',
     '徐州',
     '东莞',
     '佛山',
     '中山',
     '成都',
     '武汉',
     '青岛',
     '天津',
     '重庆',
     '南京',
     '九江',
     '香港',
     '澳门',
     '台北'
 ];

 var nums = 5; //每页出现的数量
 var pages = Math.ceil(data.length/nums); //得到总页数

 var thisDate = function(curr){
     //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
     var str = '', last = curr*nums - 1;
     last = last >= data.length ? (data.length-1) : last;
     for(var i = (curr*nums - nums); i <= last; i++){
         str += '<li>'+ data[i] +'</li>';
     }
     return str;
 };

 //调用分页
 laypage({
     cont: 'biuuu_city',
     pages: pages,
     jump: function(obj){
         document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);

     }
 })
 </script>

 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>

 </body>
 </html>

laypage 使用的更多相关文章

  1. laypage分页

    1.分页 laypage({ cont:$("#page"), //容器,仅支持id名\原生DOM对象,jquery对象 pages:, //总页数 skip:true, //是否 ...

  2. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. laypage

    <%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> < ...

  4. 非常好的分页组建layPage和 layer层特效

    http://layer.layui.com/ http://sentsin.com/layui/laypage/

  5. Jquery+artTemplate+layPage 封装datagrid

    导言 在日常开发中经常会用到列表,相信用过easyui,Ext等很多,的确很强大,但想修改确实也不容易,我也用了几年的easyui,有时间时会想一下,自已随然没有前端的精湛技术,但可以在有这些技术的开 ...

  6. php 经典分页（推荐和laypage配合）

    学习地址:http://www.imooc.com/video/2463 <?php //(ps:推荐使用laypage整站式跳转来渲染分页按钮样式比较舒服http://laypage.layu ...

  7. laypage分页功能demo

    demo代码如下: <div id="view1"></div> <div id="page1"></div> ...

  8. layPage异步分页

    layPage分页,参照官网实例写了一份.如下: function InitDataByPage(curr) { ; $.getJSON("InitDataByPage", { & ...

  9. LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

随机推荐

  1. [知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果

    一.html遮盖层与css3的旋转动画 >效果图(加载可能会慢一点儿,请稍等...): >实现思路:在一个大的div中装入一个底层img和顶层的div(里面的内容按照以上图片呈现的样式布局 ...

  2. List源码学习之ArrayList

    ArrayList 内部结构为一个可重复的对象数组(可存空对象). 内部有以下几个参数: ;/** * 用于空实例的共享空数组实例 */private static final Object[] EM ...

  3. apache访问日志分析[转]

    当前WEB服务器中联接次数最多的ip地址 #netstat -ntu |awk '{print $5}' |sort | uniq -c| sort -nr 查看日志中访问次数最多的前10个IP #c ...

  4. python3 第七章 - 循环语句

    为了让计算机能计算成千上万次的重复运算,我们就需要循环语句. Python中的循环语句有 while for 循环语句的执行过程,如下图: while 循环 Python中while语句的一般形式: ...

  5. POI--帮助文档

    1.创建工作簿 (WORKBOOK) HSSFWorkbook wb = new HSSFWorkbook(); FileOutputStream fileOut = new FileOutputSt ...

  6. java 基本数据类型与变量类型

    Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. byte,short,char,int,long,float,double Java语言支持的变 ...

  7. Android更新主线程UI的两种方式handler与runOnUiThread()

    在android开发过程中,耗时操作我们会放在子线程中去执行,而更新UI是要主线程(也叫做:UI线程)来更新的,自然会遇到如何更新主线程UI的问题.如果在主线程之外的线程中直接更新页面显示常会报错.抛 ...

  8. 【转】DEM DTM DLG DRG DOM DSM

    pasting DTM DLG DRG DOM DSM" title="[转载]DEM DTM DLG DRG DOM DSM" height="477&quo ...

  9. 【转】Linux查找本机默认网关

    ip route show | grep 'default' | awk '{print $3}' #vim getgw.sh #!/bin/shdefault_gateway_ip=`ip rout ...

  10. ajax请求获取实时数据

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...