此jQuery插件為Ajax分頁插件,一次性加載全部數據,故分頁切換時無刷新與延遲,只是重寫指定dom元素中的html內容,如果數據量較大不建議用此方法,因為加載會比較慢;
jQuery的多數插件使用都比較簡單,都能查找出相關api,且含有demo;
使用此插件,首先在頁面(jsp、html)中引入其js、CSS文件
<link href="/自定義路勁/jquery.pagination/pagination.css" rel="stylesheet">
<script src="/自定義路徑/jquery.pagination/jquery.pagination.js" type="text/javascript"></script>
<html> <body> <div id="table"> <div id="result"> 查詢后的數據 </div> <!--分頁div,使用時,只需此部分即可--> <div class="cl"> <div class="pagination" id="pageDiv"></div><!--id自定義即可--> </div> </div> <body> <script> // 創建分頁 $("#pageDiv").pagination(${p.totalPage}, { num_edge_entries: 1, //兩側顯示的首尾分頁的條目數 num_display_entries: 4, //連續分頁主體部分顯示的分頁條目數 callback: function(){//回調函數, //setLinkTo();//自定義函數:某種行為 }, link_to: "#",//分頁的鏈接 current_page: ${p.pageNo},//當前頁 PRev_text : "< 上一頁",//自定義“上一頁”標簽 next_text : "下一頁 >",//自定義“下一頁”標簽 first_text: "<i class='begin_page'>首頁</i>", //是否顯示首頁按鈕,默認為true; last_text: "<i class='last_page'>末頁</i>", //是否顯示尾頁按鈕,默認為true; items_per_page: ${p.pageSize}, //每頁顯示的條目數(pageSize) toPage: false //是否顯示跳轉到第幾頁,默認是true; }); </script></html>由于其特有的分頁邏輯,使用此插件時,需要謹慎,以免與應用后臺的分頁邏輯不符,引起不必要的二次開發。對任何插件的使用都需靈活,取你所需即可:如當我們的應用已經使用了一種前端分頁插件,但是喜歡jquery.pagination插件的樣式,此時,我們只需使用其樣式文件,再對原分頁插件源碼適當的調整即可。沒有必要推翻我們原有的分頁邏輯,為了滿足插件而使用插件。而一定是為了滿足我們而使用插件。
新聞熱點
疑難解答