24h購物| | PChome| 登入
2023-01-27 16:52:18| 人氣11| 回應0
推薦 0 收藏 0 轉貼0 訂閱站台

jquery.pagination.js JS分頁插件：簡單

找到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
###步調2：挪用mbUploadify
  1. $('.pagination').pagination({
  2.     total: 100,
  3.     onJump: function(index){
  4.         console.log(index);
  5.     }
  6. });
複製代碼
  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

4.png

 

 

完成
##設置裝備擺設項
以下為全部設置裝備擺設項
  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. });
複製代碼
然則上圖還缺了一個按鈕，感受有點不利便，所以修改了一下

 

 

 

完成圖
3.png
##使用步調
###步調1：引入資源文件
  1. <div class="pagination"></div>
  2.  
  3. <!-- mbSlider Javascript file -->
  4. <script src="jquery.pagination.js"></script>
複製代碼

 

我要檢舉
台長： alvinkn4
人氣(11) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 電玩動漫(電玩、動畫、漫畫、同人) | 個人分類: NetYea |

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文