在項目中,很多時候需要分頁控件,分頁控件自己寫也比較簡單,但是要寫一個功能豐富的分頁控件話,就麻煩了,這里推薦一款不錯的空間,頁數太多的話,顯示總頁數,搜索指定頁碼。
github地址:https://github.com/superRaytin/paginationjs
簡單demo代碼:
<!DOCTYPE html> <html> <head> <title>Paginationjs example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="../dist/pagination.css" rel="stylesheet" type="text/css"> <style type="text/css"> ul, li { list-style: none; } #wrapper { width: 900px; margin: 20px auto; } .data-container { margin-top: 5px; } .data-container ul { padding: 0; margin: 0; } .data-container li { margin-bottom: 5px; padding: 5px 10px; background: #eee; color: #666; } </style> </head> <body> <div id="wrapper"> </div> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="../src/pagination.js"></script> <script> var arr = []; for (var i=0;i<100;i++){ arr.push(i) } console.log(arr);
//arr.length 為100 說明分頁需要的總數量為100 這個個人感覺沒什么用,還不如直接給個具體數值 100好使呢。
$('#wrapper').pagination({ dataSource: arr, callback: function(data, pagination) { //回調函數 當我們點擊頁數執行的方法 console.log(data,pagination) //pagination對象 有我們需要的當前選擇頁數。
} }) </script> </body> </html>
看圖示:
pagination方法里的options僅僅給了一個回調函數,和數據源(即arr)。我們可以傳遞更多的參數,來定義我們需要的分頁器,還有api控制我們的分頁控件。
api文檔可查看:
https://github.com/superRaytin/paginationjs/blob/master/docs/cn.md