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