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 学习点滴记录
Apr 24 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
js读取配置文件自写
Feb 11 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Python使用redis pool的一种单例实现方式
2016/04/16 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python保存数据到本地文件的方法
2018/06/23 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
墨西哥网上超市:Superama
2018/07/10 全球购物
什么是规则表达式
2012/05/03 面试题
毕业自我鉴定范文
2013/11/06 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
简历的自我评价范文
2014/02/04 职场文书
2014政务公开实施方案
2014/02/19 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
感谢信模板大全
2015/01/23 职场文书
2015年科普工作总结
2015/07/23 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书