jquery实现简单的分页功能

jquery实现简单的分页功能

本文适合少量数据的使用，如果数据条数过多，不太适合！

页面html代码

<table>
<!--展示数据的表格-->
</table>
 <ul class="ul">
 <!--用于样式切换的列表-->
 </ul>

css样式

  table {
      text-align: center;
    }
    .ul li {
      padding: 0 5px;
      height: 20px;
      list-style: none;
      float: left;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;
    }
    .active {
      background: blue;
      color: #fff;
    }

jquery代码

  //使用axja获取后台数据,我这里请求的是本地的json文件
function getdata () {
  $.ajax({
    type: 'get',
    url: './test.json',
    success: function (res) {
      var len = res.length   //后端数据总条数
      var num = 5 //每一页5条数据,可以自己修改
      var totalPage = Math.ceil(res.length / num)  //总共有多少页
      var nownum = 1;   //当前的页码，默认在第一页
      var str = `<li class="prev"><<</li>`
      for (var i = 1; i <= totalPage; i++) {
        str += `<li class="li">${i}</li>`
      }
      str += `<li class="next">>></li>`
      $('.ul').html(str)  //展示页码
      showinfo(res, num, nownum)//展示首页数据
      $('.ul .li').eq(nownum - 1).addClass('active')
      for (let i = 0; i < totalPage; i++) {  //根据点击页码展示数据
        $('.ul .li').eq(i).on('click', function () {
          nownum = i + 1;
          lichange(i)
          showinfo(res, num, nownum)
        })
      }

      //点击切换上一页
      $('.prev').on('click', function () {
        if (nownum == 1) {
          alert('已经是第一页了!')
        } else {
          nownum = nownum - 1
          lichange(nownum - 1)
          showinfo(res, num, nownum)
        }
      })

      //点击切换下一页
      $('.next').on('click', function () {
        if (nownum == totalPage) {
          alert('已经最后一页了!')
        } else {
          nownum = nownum + 1
          lichange(nownum - 1)
          showinfo(res, num, nownum)
        }
      })

    },
    error: function (err) {
      console.log(err)
    }
  })
}

//信息展示模块
//res请求的json数据，n表示每页展示多少数据，Now当前页码
function showinfo (res, n, now) {
  //深拷贝数据，以免影响原来的数据
  var result = JSON.parse(JSON.stringify(res))
  var str = "<tr><th>商品</th><th>价格</th><th>数量</th></tr>"
  var i = (now - 1) * n        //从下标多少开始截取
  if (now === Math.ceil(res.length / n)) {//如果是最后一页
    result = result.slice(i);
    let num = result.length
    for (var k = 0; k < num; k++) {
      str += `<tr><td>${result[k].shop}</td><td>${result[k].price}</td>
      <td>${result[k].nums}</td></tr>`
    }
  } else { //不是最后一页
    result = result.splice(i, n);
    for (var j = 0; j < n; j++) {
      str += `<tr><td>${result[j].shop}</td><td>${result[j].price}</td>
        <td>${result[j].nums}</td></tr>`
    }
  }
  $('table').html(str)
}

//当前页码样式切换,通过传递当前点击li下标进行切换
function lichange (i) {
  $('.li').eq(i).addClass('active')
  $('.li').eq(i).siblings('.li').removeClass('active')
}

运行结果如图：