1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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/post/6992.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: