JQ分页功能
2015-05-29 09:50
183 查看
HTML
<div id='page'></div> <div id='con'></div>
CSS
span{width: 60px;height: 20px;display: inline-block;border: solid 1px black;text-align: center;margin: 5px;cursor:pointer;}
JQ
<script type='text/javascript'> var arr=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15); /* 显示那一页的内容 arr内容数组,那页的从哪条开始显示的,len就是每页显示内容条数 */ function pageCon(arr,start,len){ var constr=''; for(var i=start;i<start+len;i++){ if(arr[i-1]){ constr+=arr[i-1]+"<br/>"; } } return constr; } function show(arr,now_page){ var sum=arr.length; var page_size=5; var page_num=Math.ceil(sum/page_size); var start=(now_page-1)*page_size+1; var page_str=''; for(var i=1;i<=page_num;i++){ var stylei=i; if(i==now_page){ stylei="<span style='background:black;color:white;margin:0'>"+i+"</span>";} page_str+='<span onclick="show(arr,'+i+')">'+stylei+'</span>'; } $('#page').html(page_str); var constr=pageCon(arr,start,page_size); $('#con').html(constr); } show(arr,2); </script>
记得引jq文件~~ 囧
END !
相关文章推荐
- .NET 4.0下使用 SignalR
- 网络连接
- 【sql调优之执行计划】nested loops join and nested loop join outer
- MongoDB安全配置详解
- 微信运营:必须收藏的101条万能微信标题公式
- HDU 2065 "红色病毒"问题 指数生成函数
- 类似iOS自带相册应用的图片浏览的实现
- Qt环境配置
- Hibernate jar包详解
- GPU上缘何没有大量的cache
- 教程:VS2010 之TFS入门指南
- spring静态注入
- IE6下Png透明最佳解决方案DD_belatedPNG
- Hibernate之配置文件
- 支付宝demo 报错No architectures to compile for
- C++ string类型和char类型转换
- android ids.xml资源的使用
- 条款20:以const-reference传递替换by-value传递
- HTML5开发手机应用--viewport的作用
- Http协议详解