js分页代码分享


Posted in Javascript onApril 28, 2014

js分页代码分享

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script  type='text/javascript' src='jQuery.js'></script>
<style type="text/css">
span{width: 60px;height: 20px;display: inline-block;border: solid 1px black;text-align: center;margin: 5px;cursor:pointer;}
</style>
</head>
<body>
<div id='page'></div>
<div id='con'></div>
<script type='text/javascript'>
 var arr=new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17);
 /*
 显示那一页的内容
 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=3;
  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>
</body>
</html>
Javascript 相关文章推荐
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
php基于redis处理session的方法
Mar 14 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
深入理解vue-router之keep-alive
Aug 31 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 #Javascript
jquery禁用右键示例
Apr 28 #Javascript
jquery实现带二级菜单的导航示例
Apr 28 #Javascript
jquery实现的导航固定效果
Apr 28 #Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 #Javascript
一个简单的jquery进度条示例
Apr 28 #Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
详解Vue This$Store总结
2018/12/17 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
简单的python后台管理程序
2017/04/13 Python
python列表的增删改查实例代码
2018/01/30 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python 如何批量更新已安装的库
2020/05/26 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
营业经理岗位职责
2013/11/10 职场文书
前台文员的岗位职责
2013/11/14 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
工商管理专业自荐信
2014/06/03 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
给下属加薪申请报告
2015/05/15 职场文书
初中团委工作总结
2015/08/13 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python