Bootstrap jQuery分頁插件是一種非常方便的工具,可以在網站或應用程序中輕松地實現分頁功能。這個插件是基于Bootstrap框架的,也使用了jQuery庫來操作DOM元素。
//引用Bootstrap和jQuery庫 <link rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> //引用分頁插件的樣式和腳本 <link rel="stylesheet" href="path/to/bootstrap-pagination.css" /> <script src="path/to/bootstrap-pagination.min.js"></script>
一旦引用了這些文件,就可以開始使用分頁插件。以下是使用代碼示例:
//創建一個ul元素作為分頁器 <ul id="pagination" class="pagination"></ul> //初始化分頁插件 <script> $(function() { $('#pagination').pagination({ total: 100, //總條目數 current: 1, //當前頁碼 length: 10, //每頁顯示條目數 href: 'javascript:void(0);', //跳轉鏈接 prevText: '<上一頁', //上一頁文本 nextText: '下一頁>', //下一頁文本 prevShowAlways: true, //是否顯示上一頁按鈕 nextShowAlways: true, //是否顯示下一頁按鈕 onPageClick: function(page, evt) { //點擊頁碼時的回調函數 //處理點擊事件,例如重新加載數據 } }); }); </script>
在代碼中可以看到幾個參數,包括總數、當前頁數、每頁顯示數、跳轉鏈接等,這些都可以根據實際情況進行修改。另外,點擊頁碼時的回調函數也可以根據需求自定義,例如可以重新加載數據。
Bootstrap jQuery分頁插件為網站或應用程序添加分頁功能提供了非常方便的解決方案,使用簡單,代碼靈活。