EasyUI中分页的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中分页的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
屬性
| total | number | 記錄總數，應該在創建分頁（pagination）時設置。 | 1 |
| pageSize | number | 頁面尺寸。（注：每頁顯示的最大記錄數） | 10 |
| pageNumber | number | 創建分頁（pagination）時顯示的頁碼。 | 1 |
| pageList | array | 用戶能改變頁面尺寸。pageList 屬性定義了能改成多大的尺寸。 代碼實例： | [10,20,30,50] |
| loading | boolean | 定義數據是否正在加載。 | false |
| buttons | array,selector | 定義自定義按鈕，可能的值： 1、數組，每個按鈕包含兩個屬性： iconCls：CSS class，它將顯示一個背景圖片 handler：當按鈕被點擊時的處理函數 2、選擇器，指示按鈕。 按鈕可通過標記聲明： | null |
| layout | array | 分頁布局定義。該屬性自版本 1.3.5 起可用。 布局項目包括一個或多個下列值： 1、list：頁面尺寸列表。 2、sep：頁面按鈕分割。 3、first：第一個按鈕。 4、prev：前一個按鈕。 5、next：后一個按鈕。 6、last：最后一個按鈕。 7、efresh：刷新按鈕。 8、manual：允許輸入域頁碼的手動頁碼輸入框。 9、links：頁碼鏈接。 代碼實例： | ? |
| links | number | 鏈接數量，只有當 'links' 項包含在 'layout' 中時才是有效的。該屬性自版本 1.3.5 起可用。 | 10 |
| showPageList | boolean | 定義是否顯示頁面列表。 | true |
| showRefresh | boolean | 定義是否顯示刷新按鈕。 | true |
| beforePageText | string | 在 input 組件之前顯示 label。 | Page |
| afterPageText | string | 在 input 組件之后顯示 label。 | of {pages} |
| displayMsg | string | Display a page information. | 顯示 {from} to {to} of {total} 頁面信息。 |
事件
| onSelectPage | pageNumber, pageSize | 當用戶選擇新的頁面時觸發。回調函數包含兩個參數： pageNumber：新的頁碼 pageSize：新的頁面尺寸 代碼實例： |
| onBeforeRefresh | pageNumber, pageSize | 刷新按鈕點擊之前觸發，返回 false 就取消刷新動作。 |
| onRefresh | pageNumber, pageSize | 刷新之后觸發。 |
| onChangePageSize | pageSize | 當用戶改變頁面尺寸時觸發。 |
方法
| options | none | 返回選項（options）對象。 |
| loading | none | 把分頁（pagination）變成正在加載（loading）狀態。 |
| loaded | none | 把分頁（pagination）變成加載完成（loaded）狀態。 |
| refresh | options | 刷新并顯示分頁信息。該方法自版本 1.3 起可用。 代碼實例： |
| select | page | 選擇一個新頁面。頁面索引從 1 開始。該方法從版本 1.3 起可用。 代碼實例： |
實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body><div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"data-options="total:2000,pageSize:10,pageList: [10,20,50,100],buttons: [{iconCls:'icon-add',handler:function(){alert('add')}},'-',{iconCls:'icon-save',handler:function(){alert('save')}}]"></div> </body> </html>效果
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的EasyUI中分页的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中进度条的简单使用
- 下一篇： EasyUI中Panel面板的简单使用