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

1.新建一个桌子，添加十行数据

表格单元格间距='0 '和tr th编号/th姓名/th性别/th /tr /thead tbody tr td1/td td张飞运输署/运输署男TD/tr/tr td2/TD TD刘备运输署/运输署男TD/tr/tr td3/TD TD关羽运输署/运输署男TD/tr/tr td4/TD妲己运输署/运输署女TD/tr/tr td5/TD TD后羿运输署/运输署男TD/tr/tr td6/TD大乔运输署/运输署女TD/tr/tr td7/TD露娜运输署/运输署女TD/tr/Td8/TdE .Z/td td男TD/tr/tr td9/TD琴女运输署/运输署女TD/tr/tr td10/TD TD貂蝉运输署/运输署女TD/tr/t正文/表格

2.引入jQuery及脚本代码

脚本src=' http : jquery-1。11 .1 .js '/script script $(function(){ var $ table=$(' table ')；var CurrentPage=0；//当前页默认值为0 var PageSize=3；//每一页显示的数目$table.bind('paging '，function(){ $ table。查找(' t body tr ').隐藏()。切片（当前页面*页面大小，(当前页面1)*页面大小)。show()；});var SumRows=$ table。查找(' t body tr ').长度；var sumPages=数学。天花板(sumRows/页面大小)；//总页数var $ pager=$(' div class=' page '/div ')；//新建div，放入a标签，显示底部分页码for(var页面索引=0；pageIndexsumPagespage index){ $(' a href=' # ' rel=' external no follow ' id=' page style ' onclick=' changCss(this)' span '(页面索引1)'/span/a ').bind('click '，{'newPage':pageIndex}，function(event){ current page=event。数据['新页面']；$table.trigger('分页');//触发分页函数}).appendo($寻呼机);$寻呼机。追加(')；} $寻呼机。在($ table)之后插入；$table.trigger('分页');//默认第一页的a标签效果var $ pagess=$(' # page style ')；$ page ss[0]。风格。background COlOr=' # 006 b00$ pagess[0]。风格。color=' # ffffff});//a链接点击变色，再点其他回复原色函数changCss(obj){ var arr=document。getelementsbytagname(' a ')；for(var I=0；长度；i ){ if(obj==arr[i]){ //当前页样式物体。风格。background COlOr=' # 006 b00物体。风格。color=' # ffffff} else { arr[I]。风格。color=arr[I]。风格。background COlOr=} } }/脚本3。另外，附上表格和底部分页码的钢性铸铁样式

样式表{宽度：600像素文本对齐：居中；}表tr th，td { height:30px线高：30 pxborder:1px固体# CCC } # PageStyle { display : inline-block；宽度：32 px高度：32pxborder:1px固体# CCC线高：32 px文本对齐：居中；color : # 999 margin-top :20 px；文本装饰：无；} #页面样式： Hover {背景色： # CCC} #页面样式.活动{背景-颜色： # 0CFcolor: # ffffff} /style 4 .好了，打开浏览器试试

点击页码可翻页，成功！

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

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