使用方式

<link rel="stylesheet" href="/components/style/pagination.css" type="text/css" />
<script defer src="/components/js/pagination.js" type="text/javascript"></script>

<div
  class="st_pagination"
  st-model="paginationInfo"
  pageChange="handelPageChange"
  pageSizeChange="handelPageSizeChange"
>
  <div class="st_pagination_total">共 101 条</div>
  <div class="st_pagination_size">
    <div class="st_select">
      <div class="st_input st_input_suffix" style="width: 100px">
        <input
          type="text"
          autocomplete="off"
          readonly="readonly"
          size="mini"
          placeholder="请选择"
          class="st_input_inner"
        />
        <span class="st_input_down"><i class="stIconFont icon-xiala-down"></i></span>
      </div>
      <div class="st_select_dropdown">
        <div class="st_select_dropdown_wrap">
          <ul class="st_select_dropdown_list">
            <li class="st_select_dropdown_item" value="20" label="20条/页">20条/页</li>
            <li class="st_select_dropdown_item" value="50" label="50条/页">50条/页</li>
            <li class="st_select_dropdown_item" value="100" label="100条/页">100条/页</li>
          </ul>
        </div>
        <div class="popper_arrow"></div>
      </div>
    </div>
  </div>
  <button class="btn_prev" disabled="disabled">
    <i class="stIconFont icon-xiala-left"></i>
  </button>
  <ul class="st_pager"></ul>
  <button class="btn_next">
    <i class="stIconFont icon-xiala-right"></i>
  </button>
  <div class="st_pagination_jump">
    前往
    <div class="st_input st_pagination_editor">
      <input type="number" autocomplete="off" size="mini" class="st_input_inner" />
    </div>
    页
  </div>
  <button class="st_button is_plain jump_btn" size="mini">确定</button>
</div>

属性

属性	说明	类型	可选值	默认值
st-model	数据绑定	string	-	-
pageChange	页码变化回调方法	function	-	-
pageSizeChange	分页尺寸变化回调方法	function	-	-