基于layPage插件實現兩種分頁方式淺析

更新時間：2019年07月27日 17:01:55 作者：夜鬼

這篇文章主要為大家詳細介紹了基于layPage插件實現兩種分頁方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

兩者的區(qū)別在于：前端分頁是將所有數據取出，為方便用戶查看，合理展示數據。在前端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對象?！救缭撊萜鳛椤浚?lt;div id="page1"></div>
  pages: pages, //通過后臺拿到的總頁數
  curr: pageIndex, //當前頁
  jump: function (obj, first) { //觸發(fā)分頁后的回調
  if (!first) { //點擊跳頁觸發(fā)函數自身，并傳遞當前頁：obj.curr
   queryPara.page = obj.curr;
   pageQuery();
  }
  }
 });
 }
 </script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: