React EasyUI 分頁(yè)

2020-06-24 12:04 更新

分頁(yè)( Pagination )允許用戶通過(guò)反野導(dǎo)航數(shù)據(jù)。 分頁(yè)( Pagination )支持頁(yè)面導(dǎo)航和頁(yè)面長(zhǎng)度選擇的可配置選項(xiàng)。 分頁(yè)( Pagination )可在右側(cè)添加自定義按鈕增強(qiáng)功能性。

屬性列表

名稱 數(shù)據(jù)類(lèi)型 作用描述 默認(rèn)值
pageList number[] 定義可以更改大小。 [10,20,30,40,50]
loading boolean 是否正在加載數(shù)據(jù)。 false
showPageList boolean 是否顯示頁(yè)列表。 true
showPageInfo boolean 是否顯示頁(yè)面信息。 true
showPageRefresh boolean 是否顯示刷新按鈕。 true
links number 鏈接數(shù)量。 10
beforePageText string 在輸入組件之前顯示一個(gè)標(biāo)簽。 Page
afterPageText string 在輸入組件之后顯示一個(gè)標(biāo)簽。 of {pages}
displayMsg string 顯示頁(yè)面信息。 Displaying {from} to {to} of {total} items
layout string[] 分頁(yè)布局定義??蛇x值是:'list', 'sep', 'first', 'prev', 'sep', 'tpl', 'sep', 'next', 'last', 'sep', 'refresh', 'info', 'links'。 ['first', 'prev', 'links', 'next', 'last', 'refresh']
pageNumber number 初始化頁(yè)碼。 1
pageSize number 初始化頁(yè)面大小。 10
total number 初始化總記錄數(shù)。 0

事件列表

名稱 參數(shù) 作用描述
onPageChange { pageNumber, pageSize } 當(dāng)頁(yè)面更改時(shí)觸發(fā)。

注:
- 繼承: LocaleBase 。

使用方法

<Panel bodyStyle={{ padding: 20 }}
  footer={() => (
    <Pagination
      {...this.state}
      onPageChange={event => this.setState(event)}
    />
  )}
>
  <p>Total: {total}</p>
  <p>Page Number: {pageNumber}</p>
  <p>Page Size: {pageSize}</p>
</Panel>
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)