快捷導(dǎo)航

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

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

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

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

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

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

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

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

public class people{
 public string name{get;set;}=string.Empty;
 public int age{get;set;}=0;
}
//獲取的數(shù)據(jù)是
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(){
//獲取數(shù)據(jù)
 $.post("/liveajax/getData",function(data){
 var loaddata=jQuery.parseJSON(data);//將后臺獲取的json對象轉(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ù)量等請求數(shù)據(jù)，后臺數(shù)據(jù)庫根據(jù)分頁數(shù)據(jù)獲取對應(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ù)，在初始化時就先獲取
 $(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);//這里直接可以將對象拼裝，或者使用分部視圖，將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對象，jquery對象?！救缭撊萜鳛椤浚?lt;div id="page1"></div>
  pages: pages, //通過后臺拿到的總頁數(shù)
  curr: pageIndex, //當(dāng)前頁
  jump: function (obj, first) { //觸發(fā)分頁后的回調(diào)
  if (!first) { //點擊跳頁觸發(fā)函數(shù)自身，并傳遞當(dāng)前頁：obj.curr
   queryPara.page = obj.curr;
   pageQuery();
  }
  }
 });
 }
 </script>

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

您可能感興趣的文章: