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

 <!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. Idea Maven创建Web项目

    1.创建Maven项目 1.1File->New->Project 1.2填写GroupId和ArtifactId 1.3直接Finish,然后等一会,等Maven加载完 完成以后的项目结 ...

  2. SQLServer导出数据表结构

    SELECT (case when a.colorder=1 then d.name else '' end)表名, a.colorder 字段序号, a.name 字段名, (case when C ...

  3. SpringMvc4.x--Spring MVC的常用注解

    //下列代码显示用到的对象public class DemoObj { private Long id; private String name; public DemoObj() { //① sup ...

  4. 三、Html常用标签

    1,基本标签 <html>:html文档的根元素,可以指定一个xmlns属性,值只能是http://www/w3.org/1999/xhtml. <body>:页面主体部分 & ...

  5. 输入和输出--java序列化机制

    对象的序列化 什么是Java对象的序列化? 对象序列化的目标是将对象保存到磁盘上,或允许在网络中直接传输对象.对象序列化机制允许把内存中的Java对象转换成与平台无关的二进制流,从而保存或者传输.其他 ...

  6. linkin大话数据结构--Set

    Set 集合 Set 集合不允许包含相同的元素,如果试把两个相同的元素加入同一个 Set 集合中,则添加操作失败. Set 判断两个对象是否相同不是使用 == 运算符,而是根据 equals 方法.也 ...

  7. windows 查看端口被哪个程序占用

    比如查看端口8080 1. 查看占用端口8080对应的PID,输入命令:netstat -aon|findstr "8080" (加入查到pid为111222) 2. 继续输入ta ...

  8. 【转】sed 的参数

    一.15个参数 1.r 从文件读入 [root@watchout2 ~]# cat file12345 [root@watchout2 ~]# cat newfile abcde [root@watc ...

  9. 安装Java和Pycharm的步骤

    [root@nhserver1 usr]# java -versionjava version "1.7.0_25"OpenJDK Runtime Environment (rhe ...

  10. LINUX获取文件信息

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