用jq或者js实现一个分页器

最新推荐文章于 2024-05-21 17:16:51 发布

little_shallot

最新推荐文章于 2024-05-21 17:16:51 发布

阅读量967

点赞数 1

分类专栏：小案例文章标签： html jquery web css js

本文链接：https://blog.csdn.net/little_shallot/article/details/109699729

版权

小案例专栏收录该内容

21 篇文章 2 订阅

订阅专栏

在做项目的时候遇到需要分页器，因为项目使用的是JQ，加上我不怎么会JQ就没有去找插件用，所以自己写了一个，大概就是这个样子在这里插入图片描述
除了前面三页和后面三页位置就是固定在中间的

<style>
    body {
      margin: 0 auto;

    }

    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      align-items: center;
      margin-top: 50vh;
      justify-content: center;
    }

    ul {
      display: flex;
    }

    li {
      list-style: none;
      width: 30px;
      height: 30px;
      display: inline-block;
      margin: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
    }

    a {
      border: 1px solid rgb(0, 183, 255);
      height: 30px;
      display: flex;
      padding: 0 10px;
      background: rgb(0, 183, 255);
      border: 1px solid #ccc;
      color: #ffffff;
      text-decoration: none;
      line-height: 30px;
    }

    .bg {
      background: rgb(0, 183, 255);
      color: #ffffff;
    }

    input {
      border: none;
      padding: 0 10px;
      width: 40px;
      border: 1px solid rgb(0, 183, 255);
    }

    .but {
      margin-left: 20px;
      display: flex;
      border: 1px solid rgb(0, 183, 255);
    }
  </style>
</head>

<body>

  <div class="box">
    <a href="#" class="previous_page">上一页</a>
    <ul>
      <li id="1"></li>
      <li id="2"></li>
      <li id="3"></li>
      <li id="4"></li>
      <li id="5"></li>
      <li id="6"></li>
      <li id="7"></li>
      <li id="8"></li>
      <li id="9"></li>
      <li id="10"></li>
    </ul>
    <a href="#" class="next_page">下一页</a>
    <div class="but">

      <input type="text" class="input">
      <a href="#" class="bur_url">跳转</a>
    </div>


  </div>

  <script>
    // 默认1-7页 因为从1开始循环  所以是1-8

    var forhead = 1   //第几个开始循环
    var forbot = 8  //第几个循环结束

    var page = 10       //总页数
    var this_page = 1   //当前页

    $(document).ready(function () {

      // 页面初始化获取数据
      ajax(1)

      // 点击切换
      $('ul').on('click', 'li', function () {
        this_page = $(this).attr('id')
        ajax(this_page)
      })

      // 上一页
      $('.previous_page').click(function () {
        this_page--
        ajax(this_page)
      })

      //下一页
      $('.next_page').click(function () {
        this_page++
        ajax(this_page)
      })

      // 跳转
      $('.bur_url').click(function () {
        let value = $('input').val()
        if (value > 0 && value < page+1) {
          this_page = value
          ajax(this_page)
        } else {
        alert('请输入正确页数')
        }
      })

      // 模拟请求{}
      function ajax(this_page) {

        // 请求成功
        // 页面总数是否大于七页
       	// 请求结果的总页数
			page = data.pages  
			
        if (page > 7) {
          // 页面总数大于七页

          if (this_page < 4) {

            // 如过当前页小于4 就是前三页  显示1-7页
            forhead = 1
            forbot = 8
            html()

          } else {
            // 如过当前页大于3页
            
            let pages = Number(this_page) + Number(3) // 当前页加3
            // 判断总页数是否大于当前页加3
            if (pages < page) {
              // 如果大于当前页就从当前页-3开始循环到当前页+4
              forhead = Number(this_page) - Number(3)
              forbot = Number(this_page) + Number(4)
              html()

            } else {
              // 如果小于当前页+3从总页数-6开始循环到当前页+1
              forhead = Number(page) - Number(6)
              forbot = Number(page) + Number(1)
              html()

            }
            // 判断总页数是否大于当前页加上四页
          }

        } else {
          // 如果总页数小于7页
          forhead = 1
          forbot = page + 1
          html()
        }
        // 隐藏上一页
        if (this_page < 2) {
          $('.previous_page').css('display', 'none');
        } else {
          $('.previous_page').css('display', 'block');
        }

        if (this_page >= page) {
          $('.next_page').css('display', 'none');
        } else {
          $('.next_page').css('display', 'block');
        }

      }

      //文本模板
      function html() {
        var html_list = ''
        for (var i = forhead; i < forbot; i++) {
          if (this_page == i) {
            // 如果i等于当前页就添加css类名
            html_list += '<li class="bg" id="' + i + '">' + i + '</li>'
          } else {
            html_list += '<li id="' + i + '">' + i + '</li>'
          }
        }
        $('ul').html(html_list)
      }



    });
  </script>

因为我这里用的是JQ，需要引入jq文件才可以使用，和原生的语法应该差不多，小白一个，写错多多包涵

little_shallot

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用jq或者js实现一个分页器

在做项目的时候遇到需要分页器，因为项目使用的是JQ，加上我不怎么会JQ就没有去找插件用，所以自己写了一个，大概就是这个样子除了前面三页和后面三页位置就是固定在中间的<style> body { margin: 0 auto; } * { margin: 0; padding: 0; } .box { display: flex; align-items: center; ma
复制链接

扫一扫