jQuery给表格添加分页效果

本文实例为大家分享了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分页功能汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

网页题目：jQuery给表格添加分页效果
本文URL：https://www.cdcxhl.com/article20/gsehco.html

成都网站建设公司_创新互联，为您提供软件开发、做网站、品牌网站建设、网站营销、网站内链、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容