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

 <!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. 语句、变量等js最基本知识

    JavaScript的最为基本知识 1语法 js是区分大小写的:标识符就是指变量.函数.属性的名字或者是参数,标识符可以是字母,下划线,美元符号,数字,注意第一个不能是数字:js采用的是驼峰大小格式: ...

  2. PowerDesigner设置null约束

    在PDM的表属性的字段列表中每行最后的P,F,M中的M(Mandatory)打勾就可以了,这样在生成的SQL中会变成not NULL Mandatory:强制的,不知道是不是可以理解为必须赋值的

  3. Socket与ServerSocket

    ServerSocket: 用于打开服务端口,等待客户端连接,运行在服务端. Socket: 用于连接指定服务器的指定端口,运行在客户端. flush是输出到缓冲区,缓冲区没满的话不发送,close的 ...

  4. python_如何判断字符串a以某个字符串开头或结尾？

    案例: 某文件系统目录下有一系列文件: 1.c 2.py 3.java 4.sh 5.cpp ...... 编写一个程序,给其中所有的.sh文件和.py文件加上可执行权限 如何解决这个问题? 1. 先 ...

  5. scrapy_items

    为什么要items? 当数据量多的时候,没有统一的数据管理,统一格式化麻烦 items中除了能添加字段,还能做什么? 1. 进行预先处理 2. 对从items出去的数据进行处理 3. 写上sql语句逻 ...

  6. python初识 - day4

    一.集合(set) 1.集合的定义 set 是一个无序的元素集合,支持并.交.差及对称差等数学运算, 但由于 set 不记录元素位置, 因此不支持索引.分片等类序列的操作. 2.集合的创建 大括号或 ...

  7. Linux或Window是修改snmp的默认端口

    SNMP默认端口通讯使用 UDP 161,在安装一些监控软件的过程中,常常提示端口被占用等情况,下面说一下如何修改系统的默认SNMP端口 windows修改snmp端口 1 打开services文件 ...

  8. MongoDB投影有$slice如何只显示该字段

    简单的投影 稍微用过MongoDB的都知道,投影很简单,就直接 db.student.find({_id:ObjectId('5a5085aed8f10c1a6cc0395b')},{comments ...

  9. php 通过curl获取远程数据，返回的是一个数组型的字符串，高手帮忙如何将这个数组类型的字符串变成数组。

    如 Array([0] => Array([0] => Array([kd_status] => 已签收[kd_time] => 2014-04-30 18:59:43 [b] ...

  10. MySQL数据库学习笔记----MySQL多表查询之外键、表连接、子查询、索引

    本章主要内容: 一.外键 二.表连接 三.子查询 四.索引 一.外键: 1.什么是外键 2.外键语法 3.外键的条件 4.添加外键 5.删除外键 1.什么是外键: 主键:是唯一标识一条记录,不能有重复 ...