分页器

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

下载psd文件

点击访问：pagination-JS组件

小型分页器

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

«
1
2
3
4
5
»

«
1
2
3
4
5
»

«
1
2
3
4
5
»

常态分页器

共10页到页

共10页到页

共10页到页

无页码分页器

非主流分页器集合

共10页

共10页

<h2>小型分页器</h2>
<p class="sui-lead">当只有一页内容，且不超过5条时，可以只显示数字，把“上一页”和“下一页”拿掉。</p>
<div class="sui-pagination pagination-small">
  <ul>
    <li class="prev disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
</div>
<div class="sui-pagination">
  <ul>
    <li class="prev disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
</div>
<div class="sui-pagination pagination-large">
  <ul>
    <li class="prev disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">»</a></li>
  </ul>
</div>
<h2>常态分页器</h2>
<div class="sui-pagination pagination-small">
  <ul>
    <li class="prev disabled"><a href="#">«上一页</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="dotted"><span>...</span></li>
    <li class="next"><a href="#">下一页»</a></li>
  </ul>
  <div><span>共10页&nbsp;</span><span>
      到
      <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
      页</span></div>
</div>
<div class="sui-pagination">
  <ul>
    <li class="prev disabled"><a href="#">«上一页</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="dotted"><span>...</span></li>
    <li class="next"><a href="#">下一页»</a></li>
  </ul>
  <div><span>共10页&nbsp;</span><span>
      到
      <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
      页</span></div>
</div>
<div class="sui-pagination pagination-large">
  <ul>
    <li class="prev disabled"><a href="#">«上一页</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="dotted"><span>...</span></li>
    <li class="next"><a href="#">下一页»</a></li>
  </ul>
  <div><span>共10页&nbsp;</span><span>
      到
      <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
      页</span></div>
</div>
<h2>无页码分页器</h2>
<div class="sui-pagination pagination-small">
  <ul>
    <li class="prev"><a href="#">«上一页</a></li>
    <li class="next"><a href="#">下一页»</a></li>
  </ul>
</div>
<div class="sui-pagination">
  <ul>
    <li class="prev"><a href="#">«上一页</a></li>
    <li class="next"><a href="#">下一页»</a></li>
  </ul>
</div>
<div class="sui-pagination pagination-large">
  <ul>
    <li class="prev"><a href="#">«上一页</a></li>
    <li class="next"><a href="#">下一页»</a></li>
  </ul>
</div>
<h2>非主流分页器集合</h2>
<div class="sui-pagination pagination-large">
  <ul>
    <li class="prev"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
    <li class="prev"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
    <li><input type="text" class="ex-page-num"></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  </ul>
</div>
<div class="sui-pagination pagination-large">
  <ul>
    <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
    <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
    <li><input type="text" class="ex-page-num"></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  </ul>
</div>
<div class="sui-pagination pagination-naked pagination-large">
  <ul>
    <li class="prev"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
    <li class="prev"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
    <li><input type="text" class="ex-page-num"><span>共10页</span></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  </ul>
</div>
<div class="sui-pagination pagination-naked pagination-large">
  <ul>
    <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
    <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
    <li><input type="text" class="ex-page-num"><span>共10页</span></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
    <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
  </ul>
</div>
<div class="sui-pagination pagination-naked pagination-large">
  <ul>
    <li class="prev"><a href="#">上一页</a></li>
    <li><span class="ex-page-status">1/10</span></li>
    <li class="next"><a href="#">下一页 </a></li>
  </ul>
</div>
<div class="sui-pagination pagination-naked pagination-large">
  <ul>
    <li class="prev disabled"><a href="#">上一页</a></li>
    <li><span class="ex-page-status">1/10</span></li>
    <li class="next"><a href="#">下一页 </a></li>
  </ul>
</div>

所有形式的分页器都提供三种尺寸,除此之外，还有pagination-centered,,pagination-right 控制分页器的水平位置

复制代码

代码已复制