jQuery分頁(yè)插件jquery.pagination.js使用方法解析

更新時(shí)間：2017年02月09日 08:46:28 作者：行走的soong

這篇文章主要為大家詳細(xì)解析了jQuery分頁(yè)插件jquery.pagination使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

jquery.pagination.js插件，此jQuery插件為Ajax分頁(yè)插件，一次性加載全部數(shù)據(jù)，故分頁(yè)切換時(shí)無(wú)刷新與延遲，只是重寫指定dom元素中的html內(nèi)容，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會(huì)比較慢；

jQuery的多數(shù)插件使用都比較簡(jiǎn)單，都能查找出相關(guān)api，且含有demo；

使用此插件,首先在頁(yè)面(jsp、html)中引入其js、css文件

<link href="/自定義路勁/jquery.pagination/pagination.css" rel="external nofollow" rel="stylesheet">
<script src="/自定義路徑/jquery.pagination/jquery.pagination.js" type="text/javascript"></script>

具體代碼：

<html> 
 <body> 
  <div id="table"> 
   <div id="result"> 
    查詢后的數(shù)據(jù) 
   </div> 
   <!--分頁(yè)div，使用時(shí)，只需此部分即可--> 
   <div class="cl"> 
    <div class="pagination" id="pageDiv"></div><!--id自定義即可--> 
   </div> 
  </div> 
   
 <body> 
 <script> 
  // 創(chuàng)建分頁(yè) 
  $("#pageDiv").pagination(${p.totalPage}, { 
   num_edge_entries: 1, //兩側(cè)顯示的首尾分頁(yè)的條目數(shù) 
   num_display_entries: 4, //連續(xù)分頁(yè)主體部分顯示的分頁(yè)條目數(shù) 
   callback: function(){//回調(diào)函數(shù)， 
     //setLinkTo();//自定義函數(shù)：某種行為 
   }, 
   link_to: "#",//分頁(yè)的鏈接 
   current_page: ${p.pageNo},//當(dāng)前頁(yè) 
   prev_text : "< 上一頁(yè)",//自定義“上一頁(yè)”標(biāo)簽 
   next_text : "下一頁(yè) >",//自定義“下一頁(yè)”標(biāo)簽 
   first_text: "<i class='begin_page'>首頁(yè)</i>", //是否顯示首頁(yè)按鈕，默認(rèn)為true； 
   last_text: "<i class='last_page'>末頁(yè)</i>", //是否顯示尾頁(yè)按鈕，默認(rèn)為true； 
   items_per_page: ${p.pageSize}, //每頁(yè)顯示的條目數(shù)(pageSize) 
   toPage: false //是否顯示跳轉(zhuǎn)到第幾頁(yè)，默認(rèn)是true； 
  }); 
 </script> 
</html>

由于其特有的分頁(yè)邏輯，使用此插件時(shí)，需要謹(jǐn)慎，以免與應(yīng)用后臺(tái)的分頁(yè)邏輯不符，引起不必要的二次開(kāi)發(fā)。

對(duì)任何插件的使用都需靈活，取你所需即可：如當(dāng)我們的應(yīng)用已經(jīng)使用了一種前端分頁(yè)插件，但是喜歡jquery.pagination插件的樣式，此時(shí)，我們只需使用其樣式文件，再對(duì)原分頁(yè)插件源碼適當(dāng)?shù)恼{(diào)整即可。沒(méi)有必要推翻我們?cè)械姆猪?yè)邏輯，為了滿足插件而使用插件。而一定是為了滿足我們而使用插件。

更多精彩內(nèi)容請(qǐng)點(diǎn)擊：jquery分頁(yè)功能匯總進(jìn)行學(xué)習(xí)。

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

您可能感興趣的文章: