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

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

一次性加載數(shù)據(jù)，前端分頁

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

    $(function() {  //默認(rèn)每一頁顯示5條數(shù)據(jù)  getMsg(5)  //分頁實(shí)現(xiàn)函數(shù)  function getMsg(num) {  $.ajax({  url : ROOT+'/map/getPeopleList',  type : 'GET',  dataType : 'json',  success : function(data) {  // 1.計(jì)算分頁數(shù)量  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一次性加載所有的數(shù)據(jù)再分頁，數(shù)據(jù)太多了，一次性加載不出來，卡的很，和后臺商量了一下，得出了一個簡單的思路，當(dāng)前頁數(shù)和顯示的條數(shù)即可，解決方案如下：

分批加載數(shù)據(jù)，前端分頁（實(shí)現(xiàn)異步加載）

js代碼：$(function() {  var pageSize = 5; // 每頁顯示多少條記錄  var total; // 總共多少記錄  Init(0); // 注意參數(shù)，初始頁面默認(rèn)傳到后臺的參數(shù)，第一頁是0;  $(".Pagination").pagination(total, {  callback : PageCallback,  prev_text : '上一頁',  next_text : '下一頁',  items_per_page : pageSize,  num_display_entries : 4, // 連續(xù)分頁主體部分顯示的分頁條目數(shù)  num_edge_entries : 1, // 兩側(cè)顯示的首尾分頁的條目數(shù)  });  //點(diǎn)擊上一頁、下一頁、頁碼的時候觸發(fā)的事件  function PageCallback(index, jq) { // 前一個參數(shù)表示當(dāng)前點(diǎn)擊的那個分頁的頁數(shù)索引值，后一個參數(shù)表示裝載容器。  Init(index);  }  function Init(pageIndex) { // 參數(shù)就是點(diǎn)擊的那個分頁的頁數(shù)索引值  $.ajax({  type : "get",  url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page="  + pageIndex,  async : false,  dataType : "json",  success : function(data) {  // 賦值total，用于計(jì)算  total = data.total;  //拼接html(這個部分根據(jù)自己的需求去實(shí)現(xiàn))  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分頁插件。如果你用到此插件作分頁的時候，涉及到的數(shù)據(jù)量大，可以采用異步加載數(shù)據(jù)，當(dāng)數(shù)據(jù)不多的時候，直接一次性加載，方便簡單。

文末福利：

福利一：前端，Java，產(chǎn)品經(jīng)理，微信小程序，Python等資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入門與實(shí)戰(zhàn)全套詳細(xì)視頻教程

image

領(lǐng)取方式：
如果需要學(xué)習(xí)視頻，歡迎關(guān)注 【編程微刊】微信公眾號，回復(fù)【領(lǐng)取資源】一鍵領(lǐng)取以下所有干貨資源，獲取更多有用技術(shù)干貨、文檔資料。所有文檔會持續(xù)更新，歡迎關(guān)注一起成長！

原文作者：祈澈姑娘
原文鏈接：https://www.jianshu.com/u/05f416aefbe1
創(chuàng)作不易，轉(zhuǎn)載請告知

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

轉(zhuǎn)載于:https://www.cnblogs.com/wangting888/p/9701717.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。