前端js简单的分页功能

• 首先看下效果
  
• 只使用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