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

 <!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. dedecms后台怎么添加发布软件？织梦后台软件内容管理

    使用织梦cms有很多的功能,其中有一个是在dedecms后台添加发布软件,然后在前台大家可以直接下载软件,在织梦cms后台怎么添加发布软件呢?下面是织梦软件内容管理的主要操作步骤. 使用织梦cms有很 ...

  2. 2017-06-28（passwd 主要组与附属组 gpasswd newgrp groups）

    passwd passwd -l 用户名  (锁定用户) passwd -u 用户名 (解锁用户) passwd -d 用户名  (清楚用户密码) 主要组与附属组 一个用户可以同时属于多个组,其中一个 ...

  3. Centos硬盘IO性能检测命令iostat[转]

    Centos硬盘IO性能检测命令iostat[转] 在Linux下频繁存取文件后,物理内存会很快被用光,当程序结束后,内存不会被正常释放,而是一直作为caching.这个问题,貌似有不少人在问,不过都 ...

  4. LINUX读写文件区别

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  5. Execption:the database returned no natively generated identity value

    org.hibernate.HibernateException: The database returned no natively generated identity value at org. ...

  6. css中 padding属性的数值赋予顺序为

    4种可能的情况,举例说明:padding:10px; 四个内边距都是10pxpadding:5px 10px; 上下5px 左右10pxpadding:5px 10px 15px; 上5px 右10p ...

  7. zabbix_sender用法实例

    环境centos6.8 zabbix版本3.2.4 需求: 要远程监控一台服务器A,但只能通过远程服务器连接本地服务器B,但B不能主动连A(因为A没有固定公网ip) 使用了zabbix_agent的a ...

  8. 通过 ['1', '2', '3'].map(parseInt) 学习 map 和 parseInt 函数

    看到一道笔试题: ['1', '2', '3'].map(parseInt) 这道题目中涉及到 map 和 parseInt 函数的运用,如果对这两个函数的理解不充分的话,是很难思考出正确的结果的. ...

  9. xDB and sitecore 8 hardware Recommendations

    xDB and sitecore 8 hardware Recommendations as below: xDB hardware guidelines https://doc.sitecore.n ...

  10. java之过滤器Filter （应用场景）

    filter在开发中的常见应用:     * 1.filter可以目标资源执行之前,进行权限检查,检查用户有无权限,如有权限则放行,如没有,则拒绝访问     * 2.filter可以放行之前,对re ...