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 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
微信小程序实现刷脸登录
May 25 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 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
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python快速排序算法实例分析
2017/11/29 Python
python中的闭包函数
2018/02/09 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python中web框架的自定义创建
2019/09/08 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
市三好学生主要事迹
2014/01/28 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
营销计划书范文
2015/01/17 职场文书
业务员岗位职责
2015/02/03 职场文书
车辆管理制度范本
2015/08/05 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
python内置进制转换函数的操作
2021/06/02 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android