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 相关文章推荐
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 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
php获取访问者IP地址汇总
2015/04/24 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
Python读大数据txt
2016/03/28 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python实现机器学习之多元线性回归
2018/09/06 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python实现求特征选择的信息增益
2018/12/18 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
UNIX文件类型
2013/08/29 面试题
党课学习思想汇报
2014/01/02 职场文书
简短证婚人证婚词
2014/01/09 职场文书
经营管理策划方案
2014/05/22 职场文书
会计稽核岗位职责
2015/04/13 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
创业计划书之酒吧
2019/12/02 职场文书