新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

设计规范

开发者文档

点击访问:pagination-JS组件

小型分页器

当只有一页内容,且不超过5条时,可以只显示数字,把“上一页”和“下一页”拿掉。

常态分页器

共10页 
共10页 
共10页 

无页码分页器

非主流分页器集合

  • 共10页
  • 共10页
  1. <h2>小型分页器</h2>
  2. <p class="sui-lead">当只有一页内容,且不超过5条时,可以只显示数字,把“上一页”和“下一页”拿掉。</p>
  3. <div class="sui-pagination pagination-small">
  4. <ul>
  5. <li class="prev disabled"><a href="#">«</a></li>
  6. <li class="active"><a href="#">1</a></li>
  7. <li><a href="#">2</a></li>
  8. <li><a href="#">3</a></li>
  9. <li><a href="#">4</a></li>
  10. <li><a href="#">5</a></li>
  11. <li class="next"><a href="#">»</a></li>
  12. </ul>
  13. </div>
  14. <div class="sui-pagination">
  15. <ul>
  16. <li class="prev disabled"><a href="#">«</a></li>
  17. <li class="active"><a href="#">1</a></li>
  18. <li><a href="#">2</a></li>
  19. <li><a href="#">3</a></li>
  20. <li><a href="#">4</a></li>
  21. <li><a href="#">5</a></li>
  22. <li class="next"><a href="#">»</a></li>
  23. </ul>
  24. </div>
  25. <div class="sui-pagination pagination-large">
  26. <ul>
  27. <li class="prev disabled"><a href="#">«</a></li>
  28. <li class="active"><a href="#">1</a></li>
  29. <li><a href="#">2</a></li>
  30. <li><a href="#">3</a></li>
  31. <li><a href="#">4</a></li>
  32. <li><a href="#">5</a></li>
  33. <li class="next"><a href="#">»</a></li>
  34. </ul>
  35. </div>
  36. <h2>常态分页器</h2>
  37. <div class="sui-pagination pagination-small">
  38. <ul>
  39. <li class="prev disabled"><a href="#">«上一页</a></li>
  40. <li class="active"><a href="#">1</a></li>
  41. <li><a href="#">2</a></li>
  42. <li><a href="#">3</a></li>
  43. <li><a href="#">4</a></li>
  44. <li><a href="#">5</a></li>
  45. <li class="dotted"><span>...</span></li>
  46. <li class="next"><a href="#">下一页»</a></li>
  47. </ul>
  48. <div><span>共10页&nbsp;</span><span>
  49. <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
  50. </span></div>
  51. </div>
  52. <div class="sui-pagination">
  53. <ul>
  54. <li class="prev disabled"><a href="#">«上一页</a></li>
  55. <li class="active"><a href="#">1</a></li>
  56. <li><a href="#">2</a></li>
  57. <li><a href="#">3</a></li>
  58. <li><a href="#">4</a></li>
  59. <li><a href="#">5</a></li>
  60. <li class="dotted"><span>...</span></li>
  61. <li class="next"><a href="#">下一页»</a></li>
  62. </ul>
  63. <div><span>共10页&nbsp;</span><span>
  64. <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
  65. </span></div>
  66. </div>
  67. <div class="sui-pagination pagination-large">
  68. <ul>
  69. <li class="prev disabled"><a href="#">«上一页</a></li>
  70. <li class="active"><a href="#">1</a></li>
  71. <li><a href="#">2</a></li>
  72. <li><a href="#">3</a></li>
  73. <li><a href="#">4</a></li>
  74. <li><a href="#">5</a></li>
  75. <li class="dotted"><span>...</span></li>
  76. <li class="next"><a href="#">下一页»</a></li>
  77. </ul>
  78. <div><span>共10页&nbsp;</span><span>
  79. <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
  80. </span></div>
  81. </div>
  82. <h2>无页码分页器</h2>
  83. <div class="sui-pagination pagination-small">
  84. <ul>
  85. <li class="prev"><a href="#">«上一页</a></li>
  86. <li class="next"><a href="#">下一页»</a></li>
  87. </ul>
  88. </div>
  89. <div class="sui-pagination">
  90. <ul>
  91. <li class="prev"><a href="#">«上一页</a></li>
  92. <li class="next"><a href="#">下一页»</a></li>
  93. </ul>
  94. </div>
  95. <div class="sui-pagination pagination-large">
  96. <ul>
  97. <li class="prev"><a href="#">«上一页</a></li>
  98. <li class="next"><a href="#">下一页»</a></li>
  99. </ul>
  100. </div>
  101. <h2>非主流分页器集合</h2>
  102. <div class="sui-pagination pagination-large">
  103. <ul>
  104. <li class="prev"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
  105. <li class="prev"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
  106. <li><input type="text" class="ex-page-num"></li>
  107. <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
  108. <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  109. </ul>
  110. </div>
  111. <div class="sui-pagination pagination-large">
  112. <ul>
  113. <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
  114. <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
  115. <li><input type="text" class="ex-page-num"></li>
  116. <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
  117. <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  118. </ul>
  119. </div>
  120. <div class="sui-pagination pagination-naked pagination-large">
  121. <ul>
  122. <li class="prev"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
  123. <li class="prev"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
  124. <li><input type="text" class="ex-page-num"><span>共10页</span></li>
  125. <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
  126. <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  127. </ul>
  128. </div>
  129. <div class="sui-pagination pagination-naked pagination-large">
  130. <ul>
  131. <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
  132. <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
  133. <li><input type="text" class="ex-page-num"><span>共10页</span></li>
  134. <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
  135. <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  136. </ul>
  137. </div>
  138. <div class="sui-pagination pagination-naked pagination-large">
  139. <ul>
  140. <li class="prev"><a href="#">上一页</a></li>
  141. <li><span class="ex-page-status">1/10</span></li>
  142. <li class="next"><a href="#">下一页 </a></li>
  143. </ul>
  144. </div>
  145. <div class="sui-pagination pagination-naked pagination-large">
  146. <ul>
  147. <li class="prev disabled"><a href="#">上一页</a></li>
  148. <li><span class="ex-page-status">1/10</span></li>
  149. <li class="next"><a href="#">下一页 </a></li>
  150. </ul>
  151. </div>
所有形式的分页器都提供三种尺寸,除此之外,还有pagination-centered,,pagination-right 控制分页器的水平位置