jquery.pagination.js JS分頁插件：簡單，易用，輕量級(修改版)

woff

修改版下載

jquery.pagination-master_fix1.rar (36.51 KB, 下載次數: 0, 售價: 2 金T幣)

2020-5-5 11:27 上傳

點擊文件名下載附件
jquery.pagination.js 修改版

完成圖

jquery pagination 分頁插件

##使用步驟

###步驟1：引入資源文件

1. <div class="pagination"></div>
   
2. 
   
3. <!-- mbSlider Javascript file -->
   
4. <script src="jquery.pagination.js"></script>

複製代碼

###步驟2：調用mbUploadify

1. $('.pagination').pagination({
   
2.     total: 100,
   
3.     onJump: function(index){
   
4.         console.log(index);
   
5.     }
   
6. });

複製代碼

##配置項

以下為全部配置項

1. $('.pagination').pagination({
   
2.     /*總頁數*/
   
3.     total: 100,
   
4.     /*每頁條數*/
   
5.     row: 9,
   
6.     /*最大頁碼量,調這個值分頁頁碼數量會變化*/
   
7.     num: 2,
   
8.     /*當前索引*/
   
9.     current: 1,
   
10.     /*
    
11.         自定義分頁模板
    
12.         first, last, prev, next 請保證 data-index 值正确否則click事件無反應
    
13.         item 必須有，其它可選
    
14.     */
    
15.     template: {
    
16.         first:'<li class=\"first\" data-index=\"first\"><a href=\"#\">頁首</a></li>',
    
17.         last: '<li class=\"last\" data-index=\"last\"><a href=\"#\">頁尾</a></li>',
    
18.         prev: '<li class=\"prev\" data-index=\"prev\"><a href=\"#\">上一頁</a></li>',
    
19.         next: '<li class=\"next\" data-index=\"next\"><a href=\"#\">下一頁</a></li>',
    
20.         ellipsis: '<li class=\"ellipsis\" data-index=\"ellipsis\"><a>...</a></li>',
    
21.         item: '<li class=\"page-{{dataIndex}}\" data-index=\"{{dataIndex}}\"><a href=\"#\">{{index}}</a></li>',
    
22.         wrapElement: 'ul'
    
23.     },
    
24.     /*回調 $.noop.call(this, current, context);*/
    
25.     onJump: $.noop
    
26. });

複製代碼

但是上圖還缺了一個按鈕，感覺有點不方便，所以修改了一下

jquery pagination 分頁插件 修改

找到jquery.pagination.js

1. template: {
   
2.                 first:'<li class="first" data-index="first"><a href="javascript:;">首页</a></li>',
   
3.                 last: '<li class="last" data-index="last"><a href="javascript:;">最后一页</a></li>',
   
4.                 prev: '<li class="prev" data-index="prev"><a href="javascript:;">上一页</a></li>',
   
5.                 next: '<li class="next" data-index="next"><a href="javascript:;">下一页</a></li>',
   
6.                 ellipsis: '<li class="ellipsis" data-index="ellipsis"><a href="javascript:;">下一页</a></li>',
   
7.                 item: '<li class="page-{{dataIndex}}" data-index="{{dataIndex}}"><a href="javascript:;">{{index}}</a></li>',
   
8.                 wrapElement: 'ul'
   
9.             },

複製代碼

next下加入這行，模板 template也加入這行

1. nextone: '<li class="nextone" data-index="nextone"><a href="javascript:;">[        DISCUZ_CODE_4        ]lt;/a></li>',

複製代碼

jquery.pagination.css

1. .pagination .page-current,
   
2. .pagination .page-current a,
   
3. .pagination .ellipsis,
   
4. .pagination .ellipsis  a{
   
5.     cursor: default;
   
6. }

複製代碼

改成

1. .pagination .page-current,
   
2. .pagination .page-current a,
   
3. .pagination .ellipsis .nextone,
   
4. .pagination .ellipsis .nextone a{
   
5.     cursor: default;
   
6. }

複製代碼

完成

https://github.com/hishion/jquery.pagination