laypage 使用
最近发现一个特别好用的前端分页插件,分享一下
<!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 使用的更多相关文章
- laypage分页
1.分页 laypage({ cont:$("#page"), //容器,仅支持id名\原生DOM对象,jquery对象 pages:, //总页数 skip:true, //是否 ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- laypage
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> < ...
- 非常好的分页组建layPage和 layer层特效
http://layer.layui.com/ http://sentsin.com/layui/laypage/
- Jquery+artTemplate+layPage 封装datagrid
导言 在日常开发中经常会用到列表,相信用过easyui,Ext等很多,的确很强大,但想修改确实也不容易,我也用了几年的easyui,有时间时会想一下,自已随然没有前端的精湛技术,但可以在有这些技术的开 ...
- php 经典分页(推荐和laypage配合)
学习地址:http://www.imooc.com/video/2463 <?php //(ps:推荐使用laypage整站式跳转来渲染分页按钮样式比较舒服http://laypage.layu ...
- laypage分页功能demo
demo代码如下: <div id="view1"></div> <div id="page1"></div> ...
- layPage异步分页
layPage分页,参照官网实例写了一份.如下: function InitDataByPage(curr) { ; $.getJSON("InitDataByPage", { & ...
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
随机推荐
- Asp.net mvc 中Action 方法的执行(一)
[toc] 在 Aps.net mvc 应用中对请求的处理最终都是转换为对某个 Controller 中的某个 Action 方法的调用,因此,要对一个请求进行处理,第一步,需要根据请求解析出对应的 ...
- JAR包介绍大全用途作用详解JAVA
jta.jar 标准JTA API必要commons-collections.jar 集合类 必要antlr.jar ANother Tool for Language Recognition 必要 ...
- UITableViewCell滑动删除及移动
实现Cell的滑动删除, 需要实现UITableView的代理UITableViewDelegate中如下方法: //先要设Cell可编辑 - (BOOL)tableView:(UITableView ...
- int指令
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- css FlexBox 弹性盒子常用方法总结
总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...
- Django_中国化
需求: 要求Django显示中文,并使用北京时间 问题原因: Django具有相当的国际化,已经内置了多种语言,汉语当然也不落下,Django默认的时间是utc时间,也就是说相隔八个时区的中国,显示北 ...
- python_如何修改装饰器中参数?
案例: 为分析程序内哪些函数执行时间开销较大,我们需定义一个带timeout参数的装饰器 需求: 统计被装饰函数的运行时间 时间大于timeout时,将此次函数调用记录到log日志中 运行时可以修改t ...
- 前后端分离之CORS和WebApi
目前的项目是前端mv*+api的方式进行开发的,以前都是没有跨域的方案,前后端人员在同一个解决方案里边进行开发,前端人员要用IIS或VS来开发和调试Api,这样就很不方便,迫切需要跨域访问Api. 评 ...
- keepalived深度结合lvs_dr模式
keepalived与dr模式结合 keepalived介绍 keepalived可提供vrrp以及health-check功能,可以只用它提供双机浮动的vip(vrrp虚拟路由功能), 这样可以简单 ...
- 使用Filebeat和Logstash集中归档日志
方 案 Filebeat->Logstash->Files Filebeat->Redis->Logstash->Files Nxlog(Rsyslog.Logstash ...