jQuery给表格添加分页效果


Posted in Javascript onMarch 02, 2017

本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下

1. 新建一个Table,添加十行数据

<table cellspacing="0"> 
 <thead> 
 <tr> 
 <th>编号</th> 
 <th>姓名</th> 
 <th>性别</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td>张飞</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td>刘备</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td>关羽</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td>妲己</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td>后羿</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>6</td> 
 <td>大乔</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>7</td> 
 <td>露娜</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>8</td> 
 <td>E.Z</td> 
 <td>男</td> 
 </tr> 
 <tr> 
 <td>9</td> 
 <td>琴女</td> 
 <td>女</td> 
 </tr> 
 <tr> 
 <td>10</td> 
 <td>貂蝉</td> 
 <td>女</td> 
 </tr> 
 </tbody> 
 
</table>

jQuery给表格添加分页效果

2. 引入jQuery 及script代码

<script src="jquery-1.11.1.js"></script> 
<script> 
 $(function(){ 
 var $table = $('table'); 
 var currentPage = 0;//当前页默认值为0 
 var pageSize = 3;//每一页显示的数目 
 $table.bind('paging',function(){ 
  $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show(); 
 }); 
 var sumRows = $table.find('tbody tr').length; 
 var sumPages = Math.ceil(sumRows/pageSize);//总页数 
 
 var $pager = $('<div class="page"></div>'); //新建div,放入a标签,显示底部分页码 
 for(var pageIndex = 0 ; pageIndex<sumPages ; pageIndex++){ 
  $('<a href="#" rel="external nofollow" id="pageStyle" onclick="changCss(this)"><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){ 
  currentPage = event.data["newPage"]; 
  $table.trigger("paging"); 
  //触发分页函数 
  }).appendTo($pager); 
  $pager.append(" "); 
  } 
  $pager.insertAfter($table); 
  $table.trigger("paging"); 
  
  //默认第一页的a标签效果 
  var $pagess = $('#pageStyle'); 
  $pagess[0].style.backgroundColor="#006B00"; 
  $pagess[0].style.color="#ffffff"; 
}); 
 
//a链接点击变色,再点其他回复原色 
 function changCss(obj){ 
 var arr = document.getElementsByTagName("a"); 
 for(var i=0;i<arr.length;i++){ 
 if(obj==arr[i]){ //当前页样式 
 obj.style.backgroundColor="#006B00"; 
 obj.style.color="#ffffff"; 
 } 
 else 
 { 
 arr[i].style.color=""; 
 arr[i].style.backgroundColor=""; 
 } 
 } 
 } 
</script>

3. 另外,附上表格和底部分页码的css样式

<style> 
 table{ 
 width:600px; 
 text-align:center; 
 } 
 table tr th,td{ 
 height:30px; 
 line-height:30px; 
 border:1px solid #ccc; 
 } 
 #pageStyle{ 
 display:inline-block; 
 width:32px; 
 height:32px; 
 border:1px solid #CCC; 
 line-height:32px; 
 text-align:center; 
 color:#999; 
 margin-top:20px; 
 text-decoration:none; 
 
 } 
 #pageStyle:hover{ 
 background-color:#CCC; 
 } 
 #pageStyle .active{ 
 background-color:#0CF; 
 color:#ffffff; 
 } 
</style>

4.好了,打开浏览器试试

jQuery给表格添加分页效果

点击页码可翻页,成功!

更多精彩内容请点击:jquery分页功能汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
微信小程序商品到详情的实现
Jun 27 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 #Javascript
Bootstrap Scrollspy源码学习
Mar 02 #Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 #Javascript
jQuery实用密码强度检测
Mar 02 #Javascript
通过npm引用的vue组件使用详解
Mar 02 #Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 #Javascript
vue-dialog的弹出层组件
May 25 #Javascript
You might like
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
python实现将内容分行输出
2015/11/05 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
遗传算法python版
2018/03/19 Python
Python3 replace()函数使用方法
2018/03/19 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
python 负数取模运算实例
2020/06/03 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
C语言编程练习
2012/04/02 面试题
集团公司总经理岗位职责
2013/12/20 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
公司委托书格式范本
2014/09/16 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
趣味运动会简讯
2015/07/20 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers