上一篇文章介紹了Jquery前端分頁插件pagination的基本使用方法和使用案例，大致原理就是一次性加載所有的數據再分頁。https://www.jianshu.com/p/a1b8b1db025b

但是這樣寫的缺點就是一次性加載數據進行分頁的，后期數據多的話可能不行，數據量太大比如說上千條數據，在給每個頁面分配固定的條數，一下子加載不出來，就會導致頁面間的短暫空白，如果遇上網速不好，那差不多就是一個不完美的bug

一次性加載數據，前端分頁

上一篇文章中提到的原理js代碼如下：

    $(function() {  //默認每一頁顯示5條數據  getMsg(5)  //分頁實現函數  function getMsg(num) {  $.ajax({  url : ROOT+'/map/getPeopleList',  type : 'GET',  dataType : 'json',  success : function(data) {  // 1.計算分頁數量  var showNum = num;  var dataL = data.length;  var pageNum = Math.ceil(dataL / showNum);  $('.Pagination').pagination(pageNum,{  num_edge_entries : 1,  num_display_entries : 4,  prev_text : "<<",  next_text : ">>",  callback : function(index) {  var html = '<div>'  for (var i = showNum * index; i < showNum  * index + showNum; i++) {  if (i < dataL) {  html += "<p>" + data[i].name + "</p>"  }  }  html += '</div>';  $('.list').html(html)  })  }  })  }  }  })  

pagination一次性加載所有的數據再分頁，數據太多了，一次性加載不出來，卡的很，和后臺商量了一下，得出了一個簡單的思路，當前頁數和顯示的條數即可，解決方案如下：

分批加載數據，前端分頁（實現異步加載）

js代碼：$(function() {  var pageSize = 5; // 每頁顯示多少條記錄  var total; // 總共多少記錄  Init(0); // 注意參數，初始頁面默認傳到后臺的參數，第一頁是0;  $(".Pagination").pagination(total, {  callback : PageCallback,  prev_text : '上一頁',  next_text : '下一頁',  items_per_page : pageSize,  num_display_entries : 4, // 連續分頁主體部分顯示的分頁條目數  num_edge_entries : 1, // 兩側顯示的首尾分頁的條目數  });  //點擊上一頁、下一頁、頁碼的時候觸發的事件  function PageCallback(index, jq) { // 前一個參數表示當前點擊的那個分頁的頁數索引值，后一個參數表示裝載容器。  Init(index);  }  function Init(pageIndex) { // 參數就是點擊的那個分頁的頁數索引值  $.ajax({  type : "get",  url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page="  + pageIndex,  async : false,  dataType : "json",  success : function(data) {  // 賦值total，用于計算  total = data.total;  //拼接html(這個部分根據自己的需求去實現)  var list = data.pList;  var html = '<div>'  for (var i = 0; i < list.length; i++) {  html += "<p>" + list[i].name + "</p>"  }  html += '</div>';  $('.list').html(html)  },  error : function() {  alert("請求超時，請重試！");  }  });  };  });  

評價：分頁插件pagination
此插件是jQuery的ajax分頁插件。如果你用到此插件作分頁的時候，涉及到的數據量大，可以采用異步加載數據，當數據不多的時候，直接一次性加載，方便簡單。

文末福利：

福利一：前端，Java，產品經理，微信小程序，Python等資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實戰全套詳細視頻教程

image

領取方式：
如果需要學習視頻，歡迎關注 【編程微刊】微信公眾號，回復【領取資源】一鍵領取以下所有干貨資源，獲取更多有用技術干貨、文檔資料。所有文檔會持續更新，歡迎關注一起成長！

原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創作不易，轉載請告知

90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。

轉載于:https://www.cnblogs.com/wangting888/p/9701717.html

總結

以上是生活随笔為你收集整理的Jquery前端分页插件pagination同步加载和异步加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。