jQuery EasyUI使用教程之自定義數據網格分頁

<jQuery EasyUI最新試用版免費下載>

數據網格內置一個很好特性的分頁功能，自定義也至關簡單。在本教程中，咱們將建立一個數據網格，並在分頁工具欄上添加一些自定義按鈕。

查看jQuery EasyUI演示

建立數據網格

< table id = "tt" title = "Load Data" class = "easyui-datagrid" style = "width:550px;height:250px" url = "data/datagrid_data.json" iconcls = "icon-save" pagination = "true" >

< thead >

< tr >

< th field = "itemid" width = "80" >Item ID</ th >

< th field = "productid" width = "80" >Product ID</ th >

< th field = "listprice" width = "80" align = "right" >List Price</ th >

< th field = "unitcost" width = "80" align = "right" >Unit Cost</ th >

< th field = "attr1" width = "100" >Attribute</ th >

< th field = "status" width = "60" align = "center" >Stauts</ th >

</ tr >

</ thead >

</ table >

請注意設置 'pagination' 屬性爲true，這樣纔會生成分頁工具欄。

自定義分頁工具欄

var pager = $( '#tt' ).datagrid( 'getPager' );  // get the pager of datagrid

pager.pagination({

showPageList: false ,

buttons:[{

iconCls: 'icon-search' ,

handler: function (){

alert( 'search' );

}

},{

iconCls: 'icon-add' ,

handler: function (){

alert( 'add' );

}

},{

iconCls: 'icon-edit' ,

handler: function (){

alert( 'edit' );

}

}],

onBeforeRefresh: function (){

alert( 'before refresh' );

return true ;

}

});

正如您所看到的，咱們首先獲得數據網格的pager對象，而後從新建立分頁。咱們隱藏頁面列表，並添加三個新的按鈕。

下載EasyUI示例：easyui-datagrid-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程！