The best jQuery EasyUI Data Grid - Custom Paging Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,
Data Grid (datagrid) built a nice feature tabs, custom is quite simple. In this tutorial, we will create a data grid (datagrid), and on the tab toolbar to add some custom buttons.
<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>
Remember, setting 'pagination' property is true, this will generate a paging 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 get the first data grid (datagrid) of the pager object, and then re-create the page (pagination). We hide the list of pages, and add three new buttons.