jQuery给表格添加分页效果_网络技术_宿州市腾雀网络科技有限公司

jQuery给表格添加分页效果

发布时间 - 2026-01-10 23:22:26 点击率：次

本文实例为大家分享了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>

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表格添加分页 # jQuery表格分页 # jQuery添加分页 # jQuery插件DataTables分页开发心得体会 # jQuery条件分页代替离线查询（附代码） # jQuery Ajax 实现分页 kkpager插件实例代码 # 快速掌握jquery分页插件jqPaginator的使用方法 # jQuery Pagination分页插件_动力节点Java学院整理 # 基于jQuery封装的分页组件 # jQuery实现ajax无刷新分页页码控件 # jQuery实现页码跳转式动态数据分页 # 分页 # 后羿 # 好了 # 请点击 # 当前页 # 大家分享 # 第一页 # 刘备 # 翻页 # 具体内容 # 关羽 # 值为 # 大家多多 # 新建一个 # 再点 # 行数 # 貂蝉 # 妲己 # 打开浏览器 # js

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：剖析thinkphp下数据库读写分离代码

下一篇：使用Linux主机建站时如何确保网站安全？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：剖析thinkphp下数据库读写分离代码

下一篇：使用Linux主机建站时如何确保网站安全？