Data grid has a good paging function built in , Customization is also quite simple . In this tutorial , We're going to create a data grid , And add some custom buttons on the paging toolbar .
Create data grid
| Item ID | Product ID | List Price | Unit Cost | Attribute | Stauts |
|---|
Please pay attention to the settings 'pagination' The attribute is true, This will generate the paging toolbar .
Customize the paging toolbar
var pager = $('#tt').datagrid('getPager'); // get the pager of datagridpager.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 data grid pager object , Then recreate the paging . We hide the list of pages , And add three new buttons .
Buy jQuery EasyUI Latest legal license ！ For details, please " Consult online customer service "
In addition to the reprint of this article , All are original or translated by our website