最近在開發過程中經常用到分頁，今天擠出些時間來捋一捋自己的經驗

在web開發中，一般顯示數據列表頁時，我們會用到分頁控件來顯示數據。采用分頁一般基于兩種不同的需求，一種是數據量不算很大，但是在頁面展示又顯得過長，看起來很不舒服。一種則是因為數據量太過于龐大，無法一次性去數據庫將數據讀取出來，于是采用分頁的形式去將數據分頁顯示出來。

前者即所謂的前端分頁，而后者就是服務端分頁。

兩者的區別在于：前端分頁是將所有數據取出，為方便用戶查看，合理展示數據。在前端js上對數據進行分頁。而服務端分頁是根據當前頁面要展示的內容，通過前端傳入的參數，獲取對應頁面的數據進行展示。簡而言之就是前端分頁是在前端對數據進行分頁，服務端分頁這是在后臺對數據進行分頁。

下面分別展示下使用layPage分頁控件兩者的用法
假設后臺返回的數據對象如下：

public class people{ public string name{get;set;}=string.Empty; public int age{get;set;}=0;}//獲取的數據是List<people> plist;//JsonConvert.SerializeObject()為序列化對象return Json(JsonConvert.SerializeObject(plist));

1.前端分頁

//引用分頁控件<link rel="stylesheet" type="text/css" href="/content/H-UI.Admin/lib/laypage/1.2/skin/laypage.css" /><script type="text/javascript" src="~/content/H-UI.Admin/lib/laypage/1.2/laypage.js"></script><script type="text/javascript">$(function(){//獲取數據 $.post("/liveajax/getData",function(data){ var loaddata=jQuery.parseJSON(data);//將后臺獲取的json對象轉換為數組 loadData(loaddata);   })})function loadData(data){ var nums = 10; //每頁出現的數量 //模擬渲染 var render = function(data, curr){ var arr = [],thisData = data.concat().splice(curr*nums-nums, nums); for(var i = 0; i < thisData.length; i++){ var str ='<tr><td>thisData[i].name</td><td>thisData[i].age</td></tr>';//拼裝一行數據 arr.push(str); } return arr.join(''); }; laypage({ cont: 'page'//分頁顯示的位置 ,pages: Math.ceil(data.length/nums) //得到總頁數 ,jump: function(obj){ document.getElementById('pageBody').innerHTML = render(data, obj.curr);//pageBody：分頁內容的位置 } });}</script>

2.服務端分頁：前端傳入當前頁碼、顯示數量等請求數據，后臺數據庫根據分頁數據獲取對應的數據。即數據庫分頁查詢

//引用分頁控件<link rel="stylesheet" type="text/css" href="/content/H-UI.Admin/lib/laypage/1.2/skin/laypage.css" /><script type="text/javascript" src="~/content/H-UI.Admin/lib/laypage/1.2/laypage.js"></script><script type="text/javascript">//@ViewBag.TotalCount為數據總數，在初始化時就先獲取 $(function () { resetPage(@ViewBag.TotalCount, 1); }); //約定：queryPara（參數）、pageQuery（查詢方法）、resetPage（重置分頁） //查詢參數 var queryPara = { page:1,//頁碼 psize:10,//行數 }; //分頁查詢 function pageQuery() { var queryUrl = ‘/liveajax/getData2'; $.post(queryUrl, queryPara, function (data) {  $("table.dataTable tbody").html(data);//這里直接可以將對象拼裝，或者使用分部視圖，將data作為model參數傳入分部式圖  resetPage(@ViewBag.TotalCount, queryPara.page); }); } //重置分頁(跳轉分頁) function resetPage(recordCount, pageIndex) { var pages = recordCount % queryPara.psize == 0 ? recordCount / queryPara.psize : recordCount / queryPara.psize + 1; laypage({  cont: "page", //容器。值支持id名、原生dom對象，jquery對象。【如該容器為】：<div id="page1"></div>  pages: pages, //通過后臺拿到的總頁數  curr: pageIndex, //當前頁  jump: function (obj, first) { //觸發分頁后的回調  if (!first) { //點擊跳頁觸發函數自身，并傳遞當前頁：obj.curr   queryPara.page = obj.curr;   pageQuery();  }  } }); } </script>