快捷導(dǎo)航

基于layPage插件實(shí)現(xiàn)兩種分頁(yè)方式淺析

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

這篇文章主要為大家詳細(xì)介紹了基于layPage插件實(shí)現(xiàn)兩種分頁(yè)方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在開(kāi)發(fā)過(guò)程中經(jīng)常用到分頁(yè)，今天擠出些時(shí)間來(lái)捋一捋自己的經(jīng)驗(yàn)

在web開(kāi)發(fā)中，一般顯示數(shù)據(jù)列表頁(yè)時(shí)，我們會(huì)用到分頁(yè)控件來(lái)顯示數(shù)據(jù)。采用分頁(yè)一般基于兩種不同的需求，一種是數(shù)據(jù)量不算很大，但是在頁(yè)面展示又顯得過(guò)長(zhǎng)，看起來(lái)很不舒服。一種則是因?yàn)閿?shù)據(jù)量太過(guò)于龐大，無(wú)法一次性去數(shù)據(jù)庫(kù)將數(shù)據(jù)讀取出來(lái)，于是采用分頁(yè)的形式去將數(shù)據(jù)分頁(yè)顯示出來(lái)。

前者即所謂的前端分頁(yè)，而后者就是服務(wù)端分頁(yè)。

兩者的區(qū)別在于：前端分頁(yè)是將所有數(shù)據(jù)取出，為方便用戶查看，合理展示數(shù)據(jù)。在前端js上對(duì)數(shù)據(jù)進(jìn)行分頁(yè)。而服務(wù)端分頁(yè)是根據(jù)當(dāng)前頁(yè)面要展示的內(nèi)容，通過(guò)前端傳入的參數(shù)，獲取對(duì)應(yīng)頁(yè)面的數(shù)據(jù)進(jìn)行展示。簡(jiǎn)而言之就是前端分頁(yè)是在前端對(duì)數(shù)據(jù)進(jìn)行分頁(yè)，服務(wù)端分頁(yè)這是在后臺(tái)對(duì)數(shù)據(jù)進(jìn)行分頁(yè)。

下面分別展示下使用layPage分頁(yè)控件兩者的用法
假設(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.前端分頁(yè)

//引用分頁(yè)控件
<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; //每頁(yè)出現(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'//分頁(yè)顯示的位置
 ,pages: Math.ceil(data.length/nums) //得到總頁(yè)數(shù)
 ,jump: function(obj){

 document.getElementById('pageBody').innerHTML = render(data, obj.curr);//pageBody：分頁(yè)內(nèi)容的位置
 }
 });
}
</script>

2.服務(wù)端分頁(yè)：前端傳入當(dāng)前頁(yè)碼、顯示數(shù)量等請(qǐng)求數(shù)據(jù)，后臺(tái)數(shù)據(jù)庫(kù)根據(jù)分頁(yè)數(shù)據(jù)獲取對(duì)應(yīng)的數(shù)據(jù)。即數(shù)據(jù)庫(kù)分頁(yè)查詢

//引用分頁(yè)控件
<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（重置分頁(yè)）

 //查詢參數(shù)
 var queryPara = {
 page:1,//頁(yè)碼
 psize:10,//行數(shù)
 };
 //分頁(yè)查詢
 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);
 });
 }
 //重置分頁(yè)(跳轉(zhuǎn)分頁(yè))
 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ì)象?！救缭撊萜鳛椤浚?lt;div id="page1"></div>
  pages: pages, //通過(guò)后臺(tái)拿到的總頁(yè)數(shù)
  curr: pageIndex, //當(dāng)前頁(yè)
  jump: function (obj, first) { //觸發(fā)分頁(yè)后的回調(diào)
  if (!first) { //點(diǎn)擊跳頁(yè)觸發(fā)函數(shù)自身，并傳遞當(dāng)前頁(yè)：obj.curr
   queryPara.page = obj.curr;
   pageQuery();
  }
  }
 });
 }
 </script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: