前端js简单的分页功能

桃扇骨 2024-04-18 22:15 68阅读 0赞

*  首先看下效果  
    ![在这里插入图片描述][20190912163044785.png]
 *  只使用js编写一个简单分页, 话不多说直接上代码
 *  **这里是html代码**

<div class="page">
      <span onclick="previous()">上一页</span>
       <span id="totalPage">当前第i页/共n页</span>
       <span onclick="nextpage()">下一页</span>
       <input type="text" id="inppage">
       <span onclick="goCurrent()">GO</span> 
     </div>

*  **这里是js代码**

var current = 1
    var total = 0
    var totalPage = document.getElementById('totalPage')
    // 页面打开首次调用获取数据并初始化分页功能
    getlist() 
    function getlist () { 
      $.ajax({ 
        url: '***',
        contentType: 'application/json',
        data: JSON.stringify({ 
          perPageSize: 4,
          curPage: current
        }),
        type: 'POST',
        dataType: 'json',
        success: function(res) { 
          if (res.code == 0) { 
            total = res.data.totalPage // 设置总页数
            setPage(current, total) // 设置页码显示
            // 处理数据
            // ....
          }
        }
      })
    }
    // 上一页
    function previous() { 
      if (current > 1) { 
        current --
        getlist()
      }
    }
    // 下一页
    function nextpage(){ 
      if(current < total ) { 
        current ++
        getlist()
      }
    }
    // 跳转到
    function goCurrent() { 
      var page = parseInt(document.getElementById('inppage').value)
      if ( page >= 1 && page <= total ) { 
        current = page
        getlist()
      } 
    }
    // 设置页码
    function setPage (cur, tot) { 
      totalPage.innerHTML = '当前第'+ cur +'页/共'+tot+ '页'
    }

*  **下面是css代码**

.page { 
      padding: 20px 0;
      text-align: right;
    }
    .page > span { 
      display: inline-block;
      padding: 8px 15px;
      margin: 0 5px;
      cursor: pointer;
      background-color: #409EFF;
      color: #fff;
      min-width: 30px;
      border-radius: 5px;
    }
    .page > input { 
      height: 35px;
      width: 60px;
      display: inline-block;
      padding: 0 15px;
      font-size: 20px;
      vertical-align: middle;
      border: 1px solid #b1b1b6;
    }
    .page > span:nth-child(2) { 
      color: #3a3636;
      background-color: #f4f4f5;
    }

`觉得有用就给个赞吧!!O(∩_∩)O`

[20190912163044785.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/755d23c07e154ea5a3f81debb79681e7.png