TShopping

 找回密碼
 註冊
搜索
查看: 98|回復: 0

[分享] jquery.pagination.js JS分頁插件:簡單,易用,輕量級

[複製鏈接]
發表於 2019-7-3 23:31:10 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk  
完成圖
##使用步驟
###步驟1:引入資源文件
  1. <div class="pagination"></div>

  2. <!-- mbSlider Javascript file -->
  3. <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. });
複製代碼

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

 

臉書網友討論

本帖子中包含更多資源

您需要 登錄 才可以下載或查看,沒有帳號?註冊

x
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2019-10-22 19:34 , Processed in 0.052020 second(s), 22 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表