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 有用的脚本函数
May 07 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 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备份数据库类分享
2015/04/14 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
vue实现图片上传功能
2020/05/28 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python logging模块的使用总结
2019/07/09 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
化学教学随笔感言
2014/02/19 职场文书
低碳生活倡议书
2014/04/14 职场文书
商铺门面租房协议书
2014/10/21 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
python实现会员信息管理系统(List)
2022/03/18 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏