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入门教程(8) Location地址对象
Jan 31 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
webpack入门必知必会
Jan 16 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
详解JavaScript 作用域
Jul 14 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php实现word转html的方法
2016/01/22 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
js实现微博发布小功能
2017/01/12 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
js仿微信抢红包功能
2020/09/25 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python中的yield使用方法
2014/02/11 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
会计员岗位职责
2014/03/15 职场文书
平安工地建设方案
2014/05/06 职场文书
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android