快捷導(dǎo)航

laypage分頁控件使用實(shí)例詳解

更新時(shí)間：2016年05月19日 15:43:47 作者：螢火蟲小Q

這篇文章主要為大家詳細(xì)分享了laypage分頁控件使用實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在開發(fā)的時(shí)候經(jīng)常遇到分頁比較麻煩，尤其對(duì)于一個(gè)后端程序猿來說，但是這個(gè)問題不能不解決，于是找了一個(gè)分頁的控件用用，記錄在下，以便以后使用。

以下是官網(wǎng)中使用的簡單例子：

//以下將以jquery.ajax為例，演示一個(gè)異步分頁 
$.getJSON('test/demo1.json', {curr: 6}, function(res){ //從第6頁開始請(qǐng)求。返回的json格式可以任意定義 
 laypage({ 
  cont: 'page1', //容器。值支持id名、原生dom對(duì)象，jquery對(duì)象?！救缭撊萜鳛椤浚?lt;div id="page1"></div> 
  pages: res.pages, //通過后臺(tái)拿到的總頁數(shù) 
  curr: 6, //初始化當(dāng)前頁 
  jump: function(e){ //觸發(fā)分頁后的回調(diào) 
   $.getJSON('test/demo1.json', {curr: e.curr}, function(res){ 
    e.pages = e.last = res.pages; //重新獲取總頁數(shù)，一般不用寫 
    //渲染 
    var view = document.getElementById('view1'); //你也可以直接使用jquery 
    var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此處僅僅是為了演示 
    view.innerHTML = res.content + demoContent; 
   }); 
  } 
 }); 
});

一個(gè)基本的分頁效果也就出來了。

如果你需要其他更加絢麗的效果請(qǐng)修改源代碼。
先來說下，如果呈現(xiàn)出來一個(gè)分頁的效果的。
首先呢，引用下控件laypage.js
<script type="text/javascript" src="/lib/laypage/laypage.js"></script>

插件下載地址：

現(xiàn)在來看看插件的配置：

function SearchJoinMemberInfoPage() { 
 var ccId = parseInt($("#hid_ccid").val(), 10); 
 var saveKey = $("#targetKey").val(); 
 var pageSize = 10; 
 
 //以下將以jquery.ajax為例，演示一個(gè)異步分頁 
 $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { 
  type: 2, 
  ccId: ccId, 
  pageIndex: 1, 
  pageSize: pageSize, 
  saveKey: saveKey 
 }, 
 function (res) { //從第1頁開始請(qǐng)求。返回的json格式可以任意定義 
  laypage({ 
   cont: 'page1', //容器。值支持id名、原生dom對(duì)象，jquery對(duì)象?！救缭撊萜鳛椤浚?lt;div id="page1"></div> 
   pages: res.pageCount, //通過后臺(tái)拿到的總頁數(shù) 
   curr: 1, //初始化當(dāng)前頁 
   skin: '#429842',//皮膚顏色 
   groups: 3, //連續(xù)顯示分頁數(shù) 
   skip: true, //是否開啟跳頁 
   first: '首頁', //若不顯示，設(shè)置false即可 
   last: '尾頁', //若不顯示，設(shè)置false即可 
   //prev: '<', //若不顯示，設(shè)置false即可 
   //next: '>', //若不顯示，設(shè)置false即可 
   jump: function (e) { //觸發(fā)分頁后的回調(diào) 
    $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { 
     type: 2, 
     ccId: ccId, 
     pageIndex: e.curr,//當(dāng)前頁 
     pageSize: pageSize, 
     saveKey: saveKey 
    }, function (res) { 
     e.pages = e.last = res.pageCount; //重新獲取總頁數(shù)，一般不用寫 
     //渲染 
     var view = document.getElementById('userTable'); //你也可以直接使用jquery 
     //解析數(shù)據(jù) 
     var resultHtml = PackagData(res); 
     view.innerHTML = resultHtml; 
    }); 
   } 
  }); 
 }); 
}

/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById顯示了一個(gè)異步的地址，該異步返回需要展示的數(shù)據(jù)，和頁數(shù)。type:
2,ccId: ccId,pageIndex: 1,pageSize: pageSize,saveKey: saveKey則是異步中需要用到的參數(shù)就不說了。
PackagData(res);該函數(shù)是解析返回的數(shù)據(jù)并呈現(xiàn)出來。
userTable是用于顯示返回的數(shù)據(jù)的dom節(jié)點(diǎn)，page1是用于顯示頁數(shù)的按鈕的dom節(jié)點(diǎn)。
現(xiàn)在看下效果：