欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
开发后怎么使用小程序_jQuery给表格添加分页效果
时间: 2021-01-12 13:30 浏览次数:
jQuery给报表加上分页查询实际效果 本文关键为大伙儿详尽详细介绍了运用jQuery给报表加上分页查询实际效果,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下文中
jQuery给表格添加分页效果       这篇文章主要为大家详细介绍了利用jQuery给表格添加分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

 table cellspacing="0" 
 thead 
 th 编号 /th 
 th 姓名 /th 
 th 性别 /th 
 /tr 
 /thead 
 tbody 
 td 1 /td 
 td 张飞 /td 
 td 男 /td 
 /tr 
 td 2 /td 
 td 刘备 /td 
 td 男 /td 
 /tr 
 td 3 /td 
 td 关羽 /td 
 td 男 /td 
 /tr 
 td 4 /td 
 td 妲己 /td 
 td 女 /td 
 /tr 
 td 5 /td 
 td 后羿 /td 
 td 男 /td 
 /tr 
 td 6 /td 
 td 大乔 /td 
 td 女 /td 
 /tr 
 td 7 /td 
 td 露娜 /td 
 td 女 /td 
 /tr 
 td 8 /td 
 td E.Z /td 
 td 男 /td 
 /tr 
 td 9 /td 
 td 琴女 /td 
 td 女 /td 
 /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 /div //新建div,放入a标签,显示底部分页码 
 for(var pageIndex = 0 ; pageIndex sumPages ; pageIndex++){ 
 $(' a href="#" rel="external nofollow" id="pageStyle" 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.好了,打开浏览器试试


点击页码可翻页,成功!

更多精彩内容请点击:进行学习。

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




Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园