Element-React Pagination 分頁

當(dāng)數(shù)據(jù)量過多時(shí)，使用分頁分解數(shù)據(jù)。

基礎(chǔ)用法

設(shè)置layout，表示需要顯示的內(nèi)容，用逗號(hào)分隔，布局元素會(huì)依次顯示。prev表示上一頁，next為上一頁，pager表示頁碼列表，除此以外還提供了jumper和total，size和特殊的布局符號(hào)->，->后的元素會(huì)靠右顯示，jumper表示跳頁元素，total表示顯示頁碼總數(shù)，size用于設(shè)置每頁顯示的頁碼數(shù)量。

render() {
  return (
    <div className="first">
      <div className="block">
        <span className="demonstration">頁數(shù)較少時(shí)的效果</span>
        <Pagination layout="prev, pager, next" total={50}/>
      </div>
      <div className="block">
        <span className="demonstration">大于 7 頁時(shí)的效果</span>
        <Pagination layout="prev, pager, next" total={1000}/>
      </div>
    </div>
  )
}

小型分頁

在空間有限的情況下，可以使用簡單的小型分頁。

它接受一個(gè)Boolean，默認(rèn)為false，設(shè)為true即可啟用。

render() {
  return <Pagination layout="prev, pager, next" total={50} small={true}/>
}

附加功能

根據(jù)場景需要，可以添加其他功能模塊。

此例是一個(gè)完整的用例，使用了size-change和current-change事件來處理頁碼大小和當(dāng)前頁變動(dòng)時(shí)候觸發(fā)的事件。page-sizes接受一個(gè)整型數(shù)組，數(shù)組元素為展示的選擇每頁顯示個(gè)數(shù)的選項(xiàng)，[100, 200, 300, 400]表示四個(gè)選項(xiàng)，每頁顯示 100 個(gè)，200 個(gè)，300 個(gè)或者 400 個(gè)。

render() {
  return (
    <div className="last">
      <div className="block">
        <span className="demonstration">顯示總數(shù)</span>
        <Pagination layout="total, prev, pager, next" total={1000}/>
      </div>
      <div className="block">
        <span className="demonstration">調(diào)整每頁顯示條數(shù)</span>
        <Pagination layout="sizes, prev, pager, next" total={1000} pageSizes={[100, 200, 300, 400]} pageSize={1000}/>
      </div>
      <div className="block">
        <span className="demonstration">直接前往</span>
        <Pagination layout="prev, pager, next, jumper" total={1000} pageSize={100} currentPage={5}/>
      </div>
      <div className="block">
        <span className="demonstration">完整功能</span>
        <Pagination layout="total, sizes, prev, pager, next, jumper" total={400} pageSizes={[100, 200, 300, 400]} pageSize={100} currentPage={5}/>
      </div>
    </div>
  )
}

Attributes

Events