之前写过一个PHP 的分页效果，但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页，整理了一下：本人比较喜欢用JQ，所以这里用的是JQ的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#containet {
display: inline-block;
border: 1px solid #ed0181;
padding: 19px;
margin: auto;
}
#pageMain li {
list-style: none;
line-height: 22px;
}
#pageBox {
padding: 10px 0 0 0;
}
#pageBox span {
display: inline-block;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
color: #fff;
background: #08a586;
}
#pageNav {
display: inline-block;
}
#pageNav a {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
color: #3a87ad;
text-decoration: none;
}
#pageNav a.active, #pageNav a:hover {
background: #3a87ad;
color: #EFEFEF;
}
#prev:hover {
cursor: pointer;
}
#next:hover {
cursor: pointer;
}
</style>
</style>
</head>
<body>
<div id="containet">
<ul id="pageMain">
<li>战舰战机云集 土耳其史上最大海军演习打响 01</li>
<li>逼近伊朗！美军核航母通过苏伊士运河 02</li>
<li>宁波一动物园两只袋鼠＂出逃＂ 已全部＂抓获归案＂ 03</li>
<li>美国2架水上飞机空中相撞 已造成3死10伤 04</li>
<li>牛牛群赌博调查:一天流水或上亿 有人一月输1400万 05</li>
<li>女子买18件衣服要退货的卖家被同行找上门：他抄袭 06</li>
<li>男子＂买短乘长＂拒绝补票 辱骂推搡工作人员被拘5日 07</li>
<li>沙特船只在法国装载军火遇阻 转抵西班牙港口 08</li>
<li>女子因一条狗多次撕扯警察 最后张口咬向警察手背 09</li>
<li>男子刀捅妻子逃跑 遇交警查车时突然下车跪地自首 10</li>
<li>烟酒店店主接待＂神秘女＂ 老板娘查看监控后气坏了 11</li>
<li>上海酒店7月起不主动提供一次性用品 违者将被处罚 12</li>
<li>加州渔民垂钓偶遇一座头鲸从船底蹿出 13</li>
<li>油价7连涨后终于下调！每升降6分钱加满一箱省3元 14</li>
<li>...... ...... 15</li>
<li>...... ...... 16</li>
<li>...... ...... 17</li>
<li>...... ...... 18</li>
<li>...... ...... 19</li>
<li>...... ...... 20</li>
<li>...... ...... 21</li>
<li>...... ...... 22</li>
<li>...... ...... 23</li>
<li>...... ...... 24</li>
<li>...... ...... 25</li>
<li>...... ...... 26</li>
<li>...... ...... 27</li>
</ul>
<div id="pageBox">
<span id="prev">上一页</span>
<ul id="pageNav"></ul>
<span id="next">下一页</span>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
tabPage({
pageMain: '#pageMain',
pageNav: '#pageNav',
pagePrev: '#prev',
pageNext: '#next',
curNum: 7, /*每页显示的条数*/
activeClass: 'active', /*高亮显示的class*/
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);
// ini(iNum);
}
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>
原文链接：https://www.qiquanji.com/post/6992.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知