jquery 实现分页组件

2023-12-14 12:39:03

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', /*高亮显示的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://blog.csdn.net/DHLSP15/article/details/134991134
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。