jquery分页效果
之前写过一个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,我们将及时处理。
微信扫码关注
更新实时通知