用jq写分页器

最新推荐文章于 2025-07-27 11:48:12 发布

原创最新推荐文章于 2025-07-27 11:48:12 发布 · 789 阅读

1 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的简单分页器，通过CSS样式美化页面布局，利用JavaScript控制页面跳转和显示，适用于网页大量数据分页展示。

js分页器
效果比较简单
效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery分页器代码</title>
  <script src="jquery.min.js"></script>
</head>

<body>

  <!-- 代码begin -->
  <style>
    /* // ******************************************************分页器****************************************************** */
    #pages {
      margin-bottom: 15px;
    }

    #pages .pages {
      display: flex;
      justify-content: center;
      height: 30px;
      min-width: 400px;
    }

    #pages .pages>#pagination {
      max-width: 159px;
      overflow: hidden;
      height: 36px;
    }

    #pages .pages span {
      display: block;
      width: 30px;
    }

    #pages .pages>div.first {
      padding: 0 10px;
    }

    #pages .pages>div.first,
    .pages span,
    .pages ul li {
      height: 30px !important;
      background: #4A4B4B;
      border-radius: 5px;
      color: #fff;
      margin: 5px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }

    .pages ul li a {
      display: block;
      width: 100%;
      height: 100%;
      color: #fff !important;
    }
    ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end:0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
    #pages .pages ul li.active {
      background-color: red;
    }

    #pages .pages ul li:hover {
      background-color: red;
    }

    #pages .pages ul li {
      width: 30px;
      list-style: none;
      float: left;
      height: 30px;
    }

    #pages .pages span.hide {
      display: none;
    }

    #pages .pages ul {
      width: 1000%;
    }
  </style>
  <div id="pages">
    <!--************************************** 分页器********************************** -->
    <div class="pages">
      <!-- <div id="hide" class="hide">{{$page}}</div> -->
      <div class="first" id="first">&lt;&lt;</div>
      <div class="first" id="prev">&lt;</div>
      <span class="hide" id="prevContent">...</span>
      <div id="pagination">
        <ul id="page">
          <li>
            <a href="#">1</a>
          </li>
          <li>
            <a href="#">2</a>
          </li>
          <li>
            <a href="#">3</a>
          </li>
          <li>
            <a href="#">4</a>
          </li>
          <li>
            <a href="#">5</a>
          </li>
          <li>
            <a href="#">6</a>
          </li>
          <li>
            <a href="#">5</a>
          </li>
          <li>
            <a href="#">6</a>
          </li>
        </ul>
      </div>
      <span class="hide" id="nextContent">...</span>
      <div class="first" id="next">&gt;</div>
      <div class="first" id="last">&gt;&gt;</div>
    </div>
  </div>
  <script>
    $(function () {
      // 分页器S
      window.index = 0;
      if (parseInt($("#hide").html()) > 4) {
        window.index = parseInt($("#hide").html()) - 4;
      }
      window.indexLi = parseInt($("#hide").html()) - 1;
      console.log($("#hide").html())
      var lis = $('#page li');
      var first = $('#first')
      var last = $('#last')
      var prev = $('#prev')
      var next = $('#next')
      var prevContent = $('#prevContent')
      var nextContent = $('#nextContent')

      function pages() {

        // if (lis.length > 4) {
        //     nextContent.removeClass('hide')
        // }
        if (lis.length > 4 && window.index <= lis.length - 5) {
          nextContent.removeClass('hide')
          // console.log(window.index)
        } else {
          nextContent.addClass('hide')
        }
        lis.removeClass('active');
        lis.eq(window.indexLi).addClass('active');
        $("#page").animate({ marginLeft: -index * 40 + "px" });
      }
      pages();
      next.click(function () {
        window.indexLi += 1;
        if (window.indexLi > lis.length - 1) {
          window.indexLi = lis.length - 1;
        }
        if (lis.length > 4) {
          window.index += 1;
          if (window.index > lis.length - 5) {
            window.index = lis.length - 4;
          }
        }
        pages();
      })
      prev.click(function () {
        window.indexLi -= 1;
        if (window.indexLi <= 0) {
          window.indexLi = 0;
        }
        if (lis.length > 4) {
          window.index -= 1;
          if (window.index <= 0) {
            window.index = 0;
          }

        }
        pages();

      })
      first.click(function () {
        // if (lis.length > 4) {
        window.index = 0;
        window.indexLi = 0;
        pages();
        // }

      })
      last.click(function () {
        if (lis.length > 4) {
          window.index = lis.length - 4;
        } else {
          window.index = 0;
        }
        window.indexLi = lis.length - 1;
        pages();
      })

    });
  </script>
  <!-- 代码end -->

</body>

</html>