本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下
1。新建一个表,添加十行数据
& lt;表格单元格间距=" 0 "比;
& lt; thead>
& lt; tr>
& lt; th>编号& lt;/th>
& lt; th>姓名& lt;/th>
& lt; th>性别& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr>
& lt; td> 1 & lt;/td>
& lt; td>张飞& lt;/td>
& lt; td>男& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 2 & lt;/td>
& lt; td>刘备& lt;/td>
& lt; td>男& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 3 & lt;/td>
& lt; td>关羽& lt;/td>
& lt; td>男& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 4 & lt;/td>
& lt; td>妲己& lt;/td>
& lt; td>女& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 5 & lt;/td>
& lt; td>后羿& lt;/td>
& lt; td>男& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 6 & lt;/td>
& lt; td>大乔& lt;/td>
& lt; td>女& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 7 & lt;/td>
& lt; td>露娜& lt;/td>
& lt; td>女& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 8 & lt;/td>
& lt; td> E.Z
& lt; td>男& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 9 & lt;/td>
& lt; td>琴女& lt;/td>
& lt; td>女& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> 10 & lt;/td>
& lt; td>貂蝉& lt;/td>
& lt; td>女& lt;/td>
& lt;/tr>
& lt;/tbody>
& lt;/table>
之前
2。引入jQuery脚本及代码
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.11.1.js "祝辞& lt;/script>
& lt; script>
$(函数(){
var=$ $表(表);
var currentPage=0;//当前页默认值为0
var页大?3;//每一页显示的数目
table.bind美元(“分页”,函数(){
美元的表。找到(tbody tr) hide () .slice(当前页*页大小,(当前页+ 1)*页大小),告诉();
});
var sumRows=$表。找到(tbody tr) . length;
var sumPages=Math.ceil (sumRows/页大小);//总页数
var寻呼机美元=$ (' & lt; div类=耙趁妗弊４? lt;/div>”);//新建div,放入一个标签,显示底部分页码
(var pageIndex=0;pageIndex“+ (pageIndex + 1) + ' & lt;/span> & lt;/a>”) .bind(“点击”,{“newPage”: pageIndex},函数(事件){
当前页=event.data (“newPage”);
美元table.trigger(“分页”);//触发分页函数
}).appendTo($寻呼机);
寻呼机美元。追加(" ");
}
(pager.insertAfter美元表);
美元table.trigger(“分页”);//默认第一页的一个标签效果
var页面=美元(“# pageStyle”);
美元页面[0].style.backgroundColor=" # 006 b00”;
美元页面[0].style.color=" # ffffff”;
});//链接点击变色,再点其他回复原色
函数changCss (obj) {
var arr=document.getElementsByTagName (“a”);
我(var=0; i< arr.length;我+ +){
如果(obj==arr[我]){//当前页样式
obj.style.backgroundColor=" # 006 b00”;
obj.style.color=" # ffffff”;
}
其他的
{
加勒比海盗[我].style.color=" ";
加勒比海盗[我].style.backgroundColor=" ";
}
}
}
& lt;/script>之前
3。另外,附上表格和底部分页码的css样式
& lt; style>
表{
宽度:600 px;
text-align:中心;
}
表tr th, td {
高度:30 px;
行高:30 px;
边界:1 px固体# ccc;
}
# pageStyle {
显示:inline-block;
宽度:32像素;
高度:32像素;
边界:1 px固体# CCC;
行高:32像素;
text-align:中心;
颜色:# 999;
margin-top: 20 px;
文字修饰:没有;
}
# pageStyle:{徘徊
background - color: # CCC;
}
# pageStyle .active {
background - color: # 0 cf;
颜色:# ffffff;
}
& lt;/style>
之前
4。好了,打开浏览器试试
jQuery给表格添加分页效果
