JQuery easy UI tutorial: custom data grid Pagination
Fireworks alley 2021-02-22 23:43:54
jQuery EasyUI Download the latest trial version for free >

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 .

jQuery EasyUI Use the tutorial : Custom data grid paging

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
本文为[Fireworks alley]所创,转载请带上原文链接,感谢