React EasyUI 分頁

2020-06-24 12:04 更新

分頁( Pagination )允許用戶通過反野導航數據。 分頁( Pagination )支持頁面導航和頁面長度選擇的可配置選項。 分頁( Pagination )可在右側添加自定義按鈕增強功能性。

屬性列表

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

事件列表

名稱 參數 作用描述
onPageChange { pageNumber, pageSize } 當頁面更改時觸發(fā)。

注:
- 繼承: LocaleBase 。

使用方法

  1. <Panel bodyStyle={{ padding: 20 }}
  2. footer={() => (
  3. <Pagination
  4. {...this.state}
  5. onPageChange={event => this.setState(event)}
  6. />
  7. )}
  8. >
  9. <p>Total: {total}</p>
  10. <p>Page Number: {pageNumber}</p>
  11. <p>Page Size: {pageSize}</p>
  12. </Panel>
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號