jquery 实现分页组件，完整的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page插件演示</title>
<style>
* {
margin: 0;
padding: 0;
}
#containet {
display: table;
border: 2px solid #ff0000;
padding: 20px;
margin: 0 auto;
border-radius: 4px;
background: cornsilk;
}
#pageMain li {
list-style: none;
line-height: 40px;
}
#pageBox {
padding: 10px 0 0 0;
}
#pageBox span {
display: inline-block;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
background: #08a586;
border: 1px solid;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
#pageNav {
display: inline-block;
padding: 0 8px;
}
#pageNav a {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #3a87ad;
margin: 0 6px;
border-radius: 4px;
text-decoration: none;
}
#pageNav a.active,
#pageNav a:hover {
background: #3a87ad;
color: #EFEFEF;
}
#prev:hover {
cursor: pointer;
}
#next:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="containet">
<ul id="pageMain">
<li>这是内容标题 第1</li>
<li>这是内容标题 第2</li>
<li>这是内容标题 第3</li>
<li>这是内容标题 第4</li>
<li>这是内容标题 第5</li>
<li>这是内容标题 第6</li>
<li>这是内容标题 第7</li>
<li>这是内容标题 第8</li>
<li>这是内容标题 第9</li>
<li>这是内容标题 第10</li>
<li>这是内容标题 第11</li>
<li>这是内容标题 第12</li>
<li>这是内容标题 第13</li>
<li>这是内容标题 第14</li>
<li>这是内容标题 第15</li>
<li>这是内容标题 第16</li>
</ul>
<div id="pageBox">
<span id="prev">上一页</span>
<ul id="pageNav"></ul>
<span id="next">下一页</span>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
tabPage({
pageMain: '#pageMain',
pageNav: '#pageNav',
pagePrev: '#prev',
pageNext: '#next',
curNum: 7,
activeClass: 'active',
ini: 0
});
function tabPage(tabPage) {
var pageMain = $(tabPage.pageMain);
var pageNav = $(tabPage.pageNav);
var pagePrev = $(tabPage.pagePrev);
var pageNext = $(tabPage.pageNext);
var curNum = tabPage.curNum;
var len = Math.ceil(pageMain.find("li").length / curNum);
console.log(len);
var pageList = '';
var iNum = 0;
for (var i = 0; i < len; i++) {
pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
}
pageNav.html(pageList);
pageNav.find("a:first").addClass(tabPage.activeClass);
pageNav.find("a").each(function () {
$(this).click(function () {
pageNav.find("a").removeClass(tabPage.activeClass);
$(this).addClass(tabPage.activeClass);
iNum = $(this).index();
$(pageMain).find("li").hide();
for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
$(pageMain).find("li").eq(i).show()
}
});
})
$(pageMain).find("li").hide();
for (var i = 0; i < curNum; i++) {
$(pageMain).find("li").eq(i).show()
}
pageNext.click(function () {
$(pageMain).find("li").hide();
if (iNum == len - 1) {
alert('已经是最后一页');
for (var i = (len - 1) * curNum; i < len * curNum; i++) {
$(pageMain).find("li").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum++;
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("li").eq(i).show()
}
});
pagePrev.click(function () {
$(pageMain).find("li").hide();
if (iNum == 0) {
alert('当前是第一页');
for (var i = 0; i < curNum; i++) {
$(pageMain).find("li").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum--;
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("li").eq(i).show()
}
})
}
})
</script>
</body>
</html>
