jquery.pagination.js 用法笔记

浏览数：48 / 时间：2015年06月09日

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <link rel="stylesheet" href="pagination/pagination.css" />
 6         <title></title>
 7     </head>
 8     <body>
 9         <div class="pagination"></div>  
10     </body>
11     <script src="jquery-1.8.3.min.js"></script>
12     <script src="pagination/jquery.pagination.js"></script>
13     <script>
14         var pageIndex = 0;   //页面索引初始值
15         var pageSize = 10;   //每页显示条数初始化，修改显示条数
16         
17         $(function() {
18             //分页， pageCount是总条目数（必选参数)
19             $(".pagination").pagination(101, {
20                 prev_text: ‘上一页‘,          //上一页按钮里text
21                 next_text: ‘下一页‘,          //下一页按钮里text
22                 items_per_page: pageSize,   //显示条数
23                 num_display_entries: 6,     //连续分页主体部分分页条目数 
24                 current_page: pageIndex,    //当前页索引
25                 num_edge_entries: 0,        //两次首尾分页条目数
26                 callback: PageCallback      //翻译回调 
27             });
28             
29             function PageCallback(index, jq) {
30                 console.log(index);
31             }
32         });
33     </script>
34 </html>

css文件

.pagination {
            font-size: 80%;
        }
        
.pagination a {
    text-decoration: none;
    border: solid 1px #AAE;
    color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
}

.pagination .current {
    background: #26B;
    color: #fff;
    border: solid 1px #AAE;
}

.pagination .current.prev, .pagination .current.next{
    color:#999;
    border-color:#999;
    background:#fff;
}