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