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

 <!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. PHP 获得当前页面所有变量常量的值

    get_defined_vars() - 返回由所有已定义变量所组成的数组,这个函数在二次开发的时候用起来非常给力: get_defined_constants();可以返回当前的所有常量 zend的 ...

  2. ADO.NET复习总结（5）--工具类SqlHelper 实现登录

    工具类SqlHelper 即:完成常用数据库操作的代码封装 一.基础知识1.每次进行操作时,不变的代码: (1)连接字符串:(2)往集合存值:(3)创建连接对象.命令对象:(4)打开连接:(5)执行命 ...

  3. Java进阶篇（四）——Java异常处理

    程序中总是存在着各种问题,为了使在程序执行过程中能正常运行,使用Java提供的异常处理机制捕获可能发生的异常,对异常进行处理并使程序能正常运行.这就是Java的异常处理. 一.可捕获的异常 Java中 ...

  4. esp8266 终于装上固件了！半个月了！开始进军简单粗暴的lua语言！！

    第一次测试2017-10-2720:33:33 感谢这位大神的汇总资料太详细了 http://www.cnblogs.com/yangfengwu/p/7524326.html --first tes ...

  5. mybatis分页+springmvc+jsp+maven使用步骤

    作者注:本文主要用于个人学习.复习.同时欢迎指导讨论 1,添加maven依赖<dependency>         <groupId>com.github.miemiedev ...

  6. web.xml 中<context-param>与<init-param>的区别与作用

    <context-param>的作用: web.xml的配置中<context-param>配置作用 1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件 ...

  7. python --- 基础多线程编程

    在python中进行多线程编程之前必须了解的问题: 1. 什么是线程? 答:线程是程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的基本单位指运行中的程 ...

  8. The mkdir Command

    The mkdir command is is used to create new directories. A directory, referred to as a folder in some ...

  9. js 判断一个文本框是否获得焦点

    1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素   // 查找你要判断的文本框 ...

  10. 32位系统装4G以上的内存

    1.操作系统在32位平台上最大寻址空间是4GB,如果要使用4GB以上的内存,就必须使用intel的PAE(物理地址扩展)模式,在windows NT平台实现PAE只需对boot.ini加上/pae即可 ...