jQuery EasyUI DataGrid - Custom Pagination
The DataGrid has a built-in, well-featured pagination function, and it's quite simple to customize. In this tutorial, we will create a DataGrid and add some custom buttons to the pagination toolbar.
Creating the DataGrid
<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">Status</th>
</tr>
</thead>
</table>
Remember to set the 'pagination' attribute to true to generate the pagination toolbar.
Customizing the Pagination Toolbar
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;
}
});
As you can see, we first get the pager object of the DataGrid, then recreate the pagination. We hide the page list and add three new buttons.