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,    
,    
   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,
,
   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为下一次显示的页号，默认从第一页开始。