jquery bs_pagination是一個基于Bootstrap的分頁插件,它可以很方便地實現分頁功能,并且支持Ajax異步加載。
使用jquery bs_pagination非常簡單,只需要在頁面中引入jquery和插件文件即可:
<!-- 引入jQuery庫 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 引入bs_pagination插件 -->
<script src="http://cdn.bootcss.com/jquery.bs_pagination/1.4.1/jquery.bs_pagination.min.js"></script>
然后在HTML中添加一個ul元素作為分頁導航,并在javascript中初始化插件:
<ul class="pagination"></ul>
$(function(){ // 初始化分頁插件 $('.pagination').bs_pagination({ currentPage: 1, // 當前頁碼 totalPages: 10, // 總頁數 totalRows: 100, // 總條數 rowsPerPage: 10, // 每頁顯示條數 visiblePageLinks: 5, // 導航條顯示的頁碼數量 ajaxFetchUrl: '/pagination/data', // Ajax加載數據的URL ajaxFetchParams: {}, // Ajax加載數據時傳遞的參數 onChangePage: function(event, currentPage){ // 頁碼改變時的回調函數 console.log(currentPage); // 輸出當前頁碼 } }); });
以上代碼在頁面中生成了一個包含10頁的分頁導航,并且默認顯示第一頁的內容。
如果需要通過Ajax異步加載分頁數據,可以設置ajaxFetchUrl屬性,例如:
$('.pagination').bs_pagination({
// ...
ajaxFetchUrl: '/pagination/data',
ajaxFetchParams: { keyword: 'jquery' }, // 傳遞關鍵字參數
onChangePage: function(event, currentPage){
$.ajax({
url: '/pagination/data',
data: { page: currentPage, keyword: 'jquery' }, // 傳遞當前頁碼和關鍵字參數
success: function(data){
// 處理Ajax返回的數據
}
});
}
});
這樣,在用戶點擊分頁導航時,插件會異步加載數據,并在回調函數中處理返回的數據。
總之,jquery bs_pagination是一個非常好用的分頁插件,它支持Bootstrap風格,并且提供了豐富的配置選項和回調函數,可以滿足大部分分頁需求。