easyui是Jquery中的一个轻量级UI插件，提供了一些诸如window、datagrid、button等控件。现在主要说说Datagrid中分页控件的使用。
easyui中可以单独添加分页pagination控件，也可以在datagrid中添加paginatio控件。
如在datagrid中添加分页控件：
view plaincopy to clipboardprint? $('#tt').datagrid({ title:'Load Data', iconCls:'icon-save', 600, height:250, url:'/demo3/data/getItems' , columns:[[ {field:'itemid',title:'Item ID',80}, {field:'productid',title:'Product ID',80}, {field:'listprice',title:'List Price',80,align:'right'}, {field:'unitcost',title:'Unit Cost',80,align:'right'}, {field:'attr1',title:'Attribute',100}, {field:'status',title:'Status',60} ]], pagination:true //这里添加分页控件 }); $('#tt').datagrid({ title:'Load Data', iconCls:'icon-save', 600, height:250, url:'/demo3/data/getItems' , columns:[[ {field:'itemid',title:'Item ID',80}, {field:'productid',title:'Product ID',80}, {field:'listprice',title:'List Price',80,align:'right'}, {field:'unitcost',title:'Unit Cost',80,align:'right'}, {field:'attr1',title:'Attribute',100}, {field:'status',title:'Status',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为下一次显示的页号，默认从第一页开始。