从后台获得数据，前台实现数据加载和异步查询

前台页面大体是这样的
默认加载指定页签的第一页数据，
单击顶部页签时，异步请求相应的第一页数据
单击底部页码时，异步请求对应页码的数据
单击前进和后退时，对应请求相关数据和按钮的禁用状态

php部分

<?php
思路：未提交页签则默认异步加载指定的页签第一页数据，客户端提交了页签则异步加载对应的第一页数据，都要向前端页面返回指定页签的id
客户端提交页码时，要同时提交对应也前的id

前端数据处理下边是个简单的例子

//1 页面首次加载时
$.ajax({//页面初次加载时异步请求指定页签的第一页数据
  type:'GET',
  data:{id:指定页签在数据库中的编号,pageNum:1},
  url:'php文件',
  success:function (pager) {
    pageData(pager);
    pageNum(pager);
  }
})
//2 分页数据函数 举例如下
function pageData(pager) {
  var html="";
  $.each(pager.data,function (i,style) {
    html+=`
                <li>
                  <img src="${style.pic}">
                  <h3>
                    <a href="#">${style.title}</a>
                  </h3>
                </li>
              `;
  });
  $(".style_detail").html(html);
}
//3 分页条函数
function pageNum(pager) {
  // 判断总页数是否大于1
  if(pager.pageCount<=1){//总页数为1
    html=`<a href="" class="disabled"><</a><a href="1" class="active">1</a><a href="" class="disabled">></a>`;
  }else{ //总页数大于1
    var html=`<a href="" class="disabled"><</a>`;
    for(var i=1;i<=pager.pageNum-1;i++){
      html+=`<a href="${i}">${i}</a>`;
    }
    html+=`<a href="${pager.pageNum}" class="active">${pager.pageNum}</a>`;
    for(i=pager.pageNum+1;i<=pager.pageCount;i++){
      html+=`<a href="${i}">${i}</a>`;
    }
    html+=`<a href="" class="next">></a>`;
  }
  $("#page").html(html);
}
//4 底部分页栏异步请求数据
$("#page")
  .on("click","a:not(:first,:last)",function (e) { // 中间按钮
    e.preventDefault();
    if($(this).next().html()=="&gt;"){//后一个兄弟是>
      $(this).addClass("active").siblings(".active").removeClass("active");
      $(this).next().addClass("disabled").siblings(".disabled").removeClass("disabled");
    }else if($(this).prev().html()=="&lt;"){//前一个兄弟是<
      $(this).addClass("active").siblings(".active").removeClass("active");
      $(this).prev().addClass("disabled").siblings(".disabled").removeClass("disabled");
    }else if($(this).next().html()=="&gt;"&&$(this).prev().html()=="&lt;"){//后一个兄弟是> 前一个兄弟是<
      $(this).next().addClass("disabled");
      $(this).prev().addClass("disabled");
    }else{
      $(this).addClass("active").siblings(".active").removeClass("active").siblings(".disabled").removeClass("disabled");
    }
    var html="";
    var n=parseInt($(this).attr("href"));
    var id=parseInt($("#style_nav a.hover").attr("href"));
    $.ajax({
      type:'GET',
      url:'data/style.php',
      data:{pageNum:n,id:id},
      success:function (pager) {
        pageData(pager);
      }
    });
  })
  .on("click","a:first",function (e) { // < 按钮
    e.preventDefault();
    var html="";
    var id=parseInt($("#style_nav a.hover").attr("href"));
    var n=parseInt($('#page a[class="active"]').html());
    if(n>=2){
      n--;
      if(n==1){
        $(this).addClass("disabled").siblings(".disabled").removeClass("disabled");
      }
      $('#page a[class="active"]').removeClass("active").prev().addClass("active");
      $(this).attr("href",n);
      $.ajax({
        type:'GET',
        url:'data/style.php',
        data:{pageNum:n,id:id},
        success:function (pager) {
          pageData(pager);
        }
      })
    }
  })
  .on("click",'a:last',function (e) { // >  按钮
    e.preventDefault();
    var n=parseInt($('#page a[class="active"]').html());
    var lastN=parseInt($(this).prev().html());
    var html="";
    var id=parseInt($("#style_nav a.hover").attr("href"));
    n++;
    if(n==lastN){
      $(this).addClass("disabled").siblings(".disabled").removeClass("disabled");
    }
    if(n<=lastN){
      $('#page a[class="active"]').removeClass("active").next().addClass("active");
      $(this).attr("href",n);
      $.ajax({
        type:'GET',
        url:'data/style.php',
        data:{pageNum:n,id:id},
        success:function (pager) {
          pageData(pager);
        }
      })
    }
  });
//5 顶部页签 异步请求
$(".style_choice").on("click","a",function (e) {
  e.preventDefault();
  var html="";
  var n=parseInt($(this).attr("href"));
  $(this).addClass("hover").parent().siblings().children(".hover").removeClass("hover");
  $.ajax({
    type:'GET',
    url:'data/style.php',
    data:{id:n},
    success:function (pager) {
      pageData(pager);
      pageNum(pager);
      $("#page a:contains('1')").addClass("active").siblings(".active").removeClass("active");
    }
  });
});