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; }