分頁外掛jqPaginator的使用
阿新 • • 發佈：2020-09-19
-
匯入1個css檔案和2個js檔案，後面再導jqPaginator.css
-
在頁面建立p標籤id為info
-
建立ul標籤，類名必須叫pagination用於指定樣式，id為page
-
編寫js程式碼，使用外掛。$(ul物件).jqPaginator({});
-
設定totalCounts為100，表示一共有100條記錄
-
pageSize頁面大小，每頁顯示3條記錄
-
currentPage當前是第幾頁，預設設定為第1頁
-
onPageChange是點選每個頁碼啟用的事件，有兩個引數：num表示點了第幾頁，type表示啟用的型別，取值是"init"和"change"。在info中顯示當前啟用型別和第幾頁
引數
| 引數 | 預設值 | 說明 |
|---|---|---|
| totalCounts | 0 | 設定分頁的總條目數 |
| pageSize | 0 | 設定每一頁的條目數 注意：要麼設定totalPages，要麼設定totalCounts + pageSize，否則報錯；設定了totalCounts和pageSize後，會自動計算出totalPages。 |
| currentPage | 1 | 設定當前的頁碼 |
| onPageChange | (無) | 回撥函式，當換頁時觸發（包括初始化第一頁的時候），會傳入兩個引數： 1、“目標頁"的頁碼，Number型別 2、觸發型別，可能的值：“init”（初始化），“change”（點選分頁） |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分頁外掛的使用</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/jqPaginator.css"> <!--先匯入jquery.js 注意css和js檔案的匯入順序，jqPaginator的css檔案（依賴bootstrap框架）和js文（依賴jquery框架）件都必須在後面--> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jqPaginator.js"></script> </head> <body> <!-- 1.分頁外掛的容器必須是ul 2.必須指定類名為：pagination 3.在js程式碼中呼叫函式: ul物件.jqPaginator({引數}) --> <ul class="pagination"></ul> <script type="text/javascript"> $("ul.pagination").jqPaginator({ //總記錄數 totalCounts: 30, //每頁大小 pageSize: 3, //當前第幾頁 currentPage: 1, /* 一開始載入分頁外掛就會啟用這個函式，以後點選任何一個頁面按鈕也會啟用這個事件 有兩個引數： 1. num表示點第幾頁 2. type表示操作型別，有兩個取值：init表示第1次載入 change表示後面的點選 */ onPageChange: function (num, type) { alert("第" + num + "頁，操作型別：" + type); } }); </script> </body> </html>