paginationjs一款功能強大的分頁控件


在項目中,很多時候需要分頁控件,分頁控件自己寫也比較簡單,但是要寫一個功能豐富的分頁控件話,就麻煩了,這里推薦一款不錯的空間,頁數太多的話,顯示總頁數,搜索指定頁碼。

 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM