溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在開發過程中經常用到分頁，今天擠出些時間來捋一捋自己的經驗
在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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
