JQuery easyui Datagrid 分页事件，后台分页

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

 

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

如在datagrid中添加分页控件：

[c-sharp]  view plain  copy

1. $('#tt').datagrid({  
2.     title:'Load Data',  
3.     iconCls:'icon-save',  
4.     width:600,  
5.     height:250,  
6.     url:'/demo3/data/getItems',  
7.     columns:[[  
8.         {field:'itemid',title:'Item ID',width:80},  
9.         {field:'productid',title:'Product ID',width:80},  
10.         {field:'listprice',title:'List Price',width:80,align:'right'},  
11.         {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
12.         {field:'attr1',title:'Attribute',width:100},  
13.         {field:'status',title:'Status',width:60}  
14.     ]],  
15.     pagination:true //这里添加分页控件  
16. });  

 

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

[javascript]  view plain  copy

1. var pg = $("#tt").datagrid("getPager");  
2. if(pg)  
3. {  
4.    $(pg).pagination({  
5.        onBeforeRefresh:function(){  
6.            alert('before refresh');  
7.     },  
8.        onRefresh:function(pageNumber,pageSize){  
9.            alert(pageNumber);  
10.            alert(pageSize);  
11.         },  
12.        onChangePageSize:function(){  
13.            alert('pagesize changed');  
14.         },  
15.        onSelectPage:function(pageNumber,pageSize){  
16.            alert(pageNumber);  
17.            alert(pageSize);  
18.         }  
19.    });  
20. }  

 

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

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

上面的用法是1.4.*的用法。

今天用jquery1.6.4的时候，发现传递的参数已经变成page，rows.  page 默认为1 ，rows默认为10.