JQuery easyui Datagrid 分页事件

easyui是Jquery中的一个轻量级UI插件，提供了一些诸如window、datagrid、button等控件。现在主要说说Datagrid中分页控件的使用。

easyui中可以单独添加分页pagination控件，也可以在datagrid中添加paginatio控件。

如在datagrid中添加分页控件：view plaincopy to clipboardprint?
$('#tt').datagrid({   
    title:'Load Data',   
    iconCls:'icon-save',   
    width:600,   
    height:250,   
     url:'/demo3/data/getItems' ,   
    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 //这里添加分页控件   
});  
$('#tt').datagrid({
    title:'Load Data',
    iconCls:'icon-save',
    width:600,
    height:250,
     url:'/demo3/data/getItems' ,
    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 //这里添加分页控件
});

可以扑捉分页的触发事件，方法如下：

view plaincopy to clipboardprint?
var pg = $("#tt").datagrid("getPager");   
if(pg)   
{   
   $(pg).pagination({   
       onBeforeRefresh:function(){   
           alert('before refresh');   
    },   
       onRefresh:function(pageNumber,pageSize){   
           alert(pageNumber);   
           alert(pageSize);   
        },   
       onChangePageSize:function(){   
           alert('pagesize changed');   
        },   
       onSelectPage:function(pageNumber,pageSize){   
           alert(pageNumber);   
           alert(pageSize);   
        }   
   });   
}  
var pg = $("#tt").datagrid("getPager");
if(pg)
{
   $(pg).pagination({
       onBeforeRefresh:function(){
           alert('before refresh');
 },
       onRefresh:function(pageNumber,pageSize){
           alert(pageNumber);
           alert(pageSize);
        },
       onChangePageSize:function(){
           alert('pagesize changed');
        },
       onSelectPage:function(pageNumber,pageSize){
           alert(pageNumber);
           alert(pageSize);
        }
   });
}

在触发onChangePageSize事件时，会同时触发onSelectPage事件。onSelectPage事件会传递2个参数pageNumber、pageSize.

pageSize是页大小，pageNumber为下一次显示的页号，默认从第一页开始。