EasyUI 自定义DataGrid分页

DataGrid内建分页能力是强大的，它比自定义相对容易。在这个教程，我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。

标记
<table id="tt"></table>
创建DataGrid

$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:550,
    height:250,
    pagination:true,
    url:'datagrid_data.json',
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});

记住设置pagination属性为true产生页面工具栏。
自定义页面工具栏

var pager = $('#tt').datagrid('getPager');    //得到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;
    }
});

我们得到DataGrid页，然后重新构建页面。我们隐藏页列表然后添加新按钮