基于layPage插件實(shí)現(xiàn)兩種分頁方式淺析
最近在開發(fā)過程中經(jīng)常用到分頁,今天擠出些時(shí)間來捋一捋自己的經(jīng)驗(yàn)
在web開發(fā)中,一般顯示數(shù)據(jù)列表頁時(shí),我們會(huì)用到分頁控件來顯示數(shù)據(jù)。采用分頁一般基于兩種不同的需求,一種是數(shù)據(jù)量不算很大,但是在頁面展示又顯得過長(zhǎng),看起來很不舒服。一種則是因?yàn)閿?shù)據(jù)量太過于龐大,無法一次性去數(shù)據(jù)庫將數(shù)據(jù)讀取出來,于是采用分頁的形式去將數(shù)據(jù)分頁顯示出來。
前者即所謂的前端分頁,而后者就是服務(wù)端分頁。
兩者的區(qū)別在于:前端分頁是將所有數(shù)據(jù)取出,為方便用戶查看,合理展示數(shù)據(jù)。在前端js上對(duì)數(shù)據(jù)進(jìn)行分頁。而服務(wù)端分頁是根據(jù)當(dāng)前頁面要展示的內(nèi)容,通過前端傳入的參數(shù),獲取對(duì)應(yīng)頁面的數(shù)據(jù)進(jìn)行展示。簡(jiǎn)而言之就是前端分頁是在前端對(duì)數(shù)據(jù)進(jìn)行分頁,服務(wù)端分頁這是在后臺(tái)對(duì)數(shù)據(jù)進(jìn)行分頁。
下面分別展示下使用layPage分頁控件兩者的用法
假設(shè)后臺(tái)返回的數(shù)據(jù)對(duì)象如下:
public class people{
public string name{get;set;}=string.Empty;
public int age{get;set;}=0;
}
//獲取的數(shù)據(jù)是
List<people> plist;
//JsonConvert.SerializeObject()為序列化對(duì)象
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(){
//獲取數(shù)據(jù)
$.post("/liveajax/getData",function(data){
var loaddata=jQuery.parseJSON(data);//將后臺(tái)獲取的json對(duì)象轉(zhuǎn)換為數(shù)組
loadData(loaddata);
})
})
function loadData(data){
var nums = 10; //每頁出現(xiàn)的數(shù)量
//模擬渲染
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>';//拼裝一行數(shù)據(jù)
arr.push(str);
}
return arr.join('');
};
laypage({
cont: 'page'//分頁顯示的位置
,pages: Math.ceil(data.length/nums) //得到總頁數(shù)
,jump: function(obj){
document.getElementById('pageBody').innerHTML = render(data, obj.curr);//pageBody:分頁內(nèi)容的位置
}
});
}
</script>
2.服務(wù)端分頁:前端傳入當(dāng)前頁碼、顯示數(shù)量等請(qǐng)求數(shù)據(jù),后臺(tái)數(shù)據(jù)庫根據(jù)分頁數(shù)據(jù)獲取對(duì)應(yīng)的數(shù)據(jù)。即數(shù)據(jù)庫分頁查詢
//引用分頁控件
<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為數(shù)據(jù)總數(shù),在初始化時(shí)就先獲取
$(function () {
resetPage(@ViewBag.TotalCount, 1);
});
//約定:queryPara(參數(shù))、pageQuery(查詢方法)、resetPage(重置分頁)
//查詢參數(shù)
var queryPara = {
page:1,//頁碼
psize:10,//行數(shù)
};
//分頁查詢
function pageQuery() {
var queryUrl = ‘/liveajax/getData2';
$.post(queryUrl, queryPara, function (data) {
$("table.dataTable tbody").html(data);//這里直接可以將對(duì)象拼裝,或者使用分部視圖,將data作為model參數(shù)傳入分部式圖
resetPage(@ViewBag.TotalCount, queryPara.page);
});
}
//重置分頁(跳轉(zhuǎn)分頁)
function resetPage(recordCount, pageIndex) {
var pages = recordCount % queryPara.psize == 0 ? recordCount / queryPara.psize : recordCount / queryPara.psize + 1;
laypage({
cont: "page", //容器。值支持id名、原生dom對(duì)象,jquery對(duì)象。【如該容器為】:<div id="page1"></div>
pages: pages, //通過后臺(tái)拿到的總頁數(shù)
curr: pageIndex, //當(dāng)前頁
jump: function (obj, first) { //觸發(fā)分頁后的回調(diào)
if (!first) { //點(diǎn)擊跳頁觸發(fā)函數(shù)自身,并傳遞當(dāng)前頁:obj.curr
queryPara.page = obj.curr;
pageQuery();
}
}
});
}
</script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- laypage.js分頁插件使用方法詳解
- layui2.0使用table+laypage實(shí)現(xiàn)真分頁
- thinkPHP3.2.3結(jié)合Laypage實(shí)現(xiàn)的分頁功能示例
- thinkPHP5使用laypage分頁插件實(shí)現(xiàn)列表分頁功能
- 基于LayUI分頁和LayUI laypage分頁的使用示例
- VUEJS實(shí)戰(zhàn)之利用laypage插件實(shí)現(xiàn)分頁(3)
- laypage分頁控件使用實(shí)例詳解
- js多功能分頁組件layPage使用方法詳解
- laypage前端分頁插件實(shí)現(xiàn)ajax異步分頁
- laypage+SpringMVC實(shí)現(xiàn)后端分頁
相關(guān)文章
js實(shí)現(xiàn)連續(xù)英文字符自動(dòng)換行兼容ie6 ie7和firefox
英文字符自動(dòng)換行,通過js腳本截?cái)嘧址?此方法通用ie6,ie7,firefox,使用CSS控制強(qiáng)制換行實(shí)現(xiàn)不了的朋友可以嘗試下2013-09-09
js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果
本文主要介紹了js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
用JavaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄肑avaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JavaScript實(shí)現(xiàn)樹的遍歷算法示例【廣度優(yōu)先與深度優(yōu)先】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)樹的遍歷算法,結(jié)合實(shí)例形式分析了javascript針對(duì)樹結(jié)構(gòu)的廣度優(yōu)先遍歷與深度優(yōu)先遍歷實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼的代碼,需要的朋友可以參考下2014-12-12
BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果(續(xù))
這篇文章主要介紹了BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07

