溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jquery.pagination.js插件，此jQuery插件為Ajax分頁插件，一次性加載全部數據，故分頁切換時無刷新與延遲，只是重寫指定dom元素中的html內容，如果數據量較大不建議用此方法，因為加載會比較慢；
jQuery的多數插件使用都比較簡單，都能查找出相關api，且含有demo；
使用此插件,首先在頁面(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">
查詢后的數據
</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插件的樣式，此時，我們只需使用其樣式文件，再對原分頁插件源碼適當的調整即可。沒有必要推翻我們原有的分頁邏輯，為了滿足插件而使用插件。而一定是為了滿足我們而使用插件。
更多精彩內容請點擊：jquery分頁功能匯總進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
