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 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
AngularJS实现多级下拉框
Mar 25 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
APMServ使用说明
2006/10/23 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
destoon常用的安全设置概述
2014/06/21 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
js实现二级导航功能
2017/03/03 Javascript
axios基本入门用法教程
2017/03/25 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
Vue实现简易计算器
2020/02/25 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
初级会计求职信范文
2014/02/15 职场文书
派出所所长先进事迹
2014/05/19 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
2019年工作总结范文
2019/05/21 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python