jQuery将一个分页效果添加到表中。

这个例子为你分享jQuery表添加分页的具体代码，供大家参考，具体内容如下

1。创建一个新表，添加十行数据

数
全名
性别

一
张
男性的

二
刘备
男性的

三
关羽
男性的

四
阿曼达
女性的

五
后羿
男性的

六
乔
女性的

七
卢娜
女性的

八
E. Z
男性的

九
女性器官
女性的

十
军官帽饰
女性的

2。介绍jQuery和脚本代码

$（函数（）{（））
var $表= $（}}）；
无功currentpage = 0； / /当前页面，默认值是0
VaR PageSize = 3； / /每页显示数
table.bind美元（'paging，函数（）{（）{
table.find美元（'tbody TR）。隐藏（）。片（currentpage *大小（（currentpage + 1）* PageSize）显示（）；
}）；
无功sumrows = table.find美元（'tbody TR的长度）；
无功sumpages = math.ceil（sumrows / / / PageSize）；总页数

var = $（）；新div，在页面底部添加一个标记显示
对于（VAR PageIndex = 0；PageIndex < sumpages；PageIndex ++）{
（$'+（页索引+ 1）+）Bind（单击。
currentpage =事件。数据{新页}；
table.trigger美元（分页）；
触发分页功能
}）AppendTo（$寻呼机）；
pager.append美元（）；
}
pager.insertafter美元（$表）；
table.trigger美元（分页）；

默认标签效果的第一页
pagess = $（var $ ' # pagestyle）；
为pagess { 0 }。风格。背景颜色=# 006b00 ；
为pagess { 0 }。风格。颜色=# ffffff ；
}）；

链接点击变色，然后指向其他原始颜色。
功能changcss（obj）{
var arr = document.getelementsbytagname（）；
对于（var i = 0；i < arr.length；i++）{
如果（obj = = ARR {我}）{ / /当前页面的风格
obj。风格。背景颜色=# 006b00 ；
obj。风格。颜色=# ffffff ；
}
其他的
{
ARR {我}。风格。颜色= ；
ARR {我}。风格。背景颜色= ；
}
}
}

三.另外，要附加表格的CSS样式和底页编号。

表{
宽度：600px；
文本对齐：中心；
}
表TR
身高：30px；
行高：30px；
边境：1px solid # CCC；
}
# pagestyle {
显示：内联块；
宽度：32px；
身高：32px；
边境：1px solid # CCC；
行高：32px；
文本对齐：中心；
颜色：# 999；
边距：20px；
文字装饰：无；

}
# pagestyle：悬停{
背景颜色：# CCC；
}
# pagestyle主动{。
背景颜色：# 0cf；
颜色：# ffffff；
}

4。好，打开浏览器试试看

页码可以点击到页面，成功！

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。