前臺頁面大體是這樣的
預設載入指定頁籤的第一頁資料，
單擊頂部頁籤時，非同步請求相應的第一頁資料
單擊底部頁碼時，非同步請求對應頁碼的資料
單擊前進和後退時，對應請求相關資料和按鈕的禁用狀態

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");
    }
  });
});