var p = $('#mainTable').datagrid('getPager'); if (p){ $(p).pagination({ onSelectPage:function(pageNumber, pageSize){ param = $.extend(param,{page:pageNumber,rows:pageSize});//这步需要把分页参数传给后台做分页查询 $(this).pagination('loading'); loadData(param);//重载数据将datagrid填充。 $(this).pagination('loaded'); }, onBeforeRefresh:function(pageNumber,pageSize){ $(this).pagination('loading'); //progress bar }, onRefresh:function(){ $(this).pagination('loaded'); } }); }easyUI 的前端分页还是挺完善的，话说只要用一句话就可以搞定。下面是datagrid方式的分页。先把数据加载到datagrid。。。$.getJSON(url,function(data){ var _peConfig = data.peIDConfig; var _fzConfig = data.peFZConfig; $("#mainTable").datagrid({ iconCls:'icon-save', nowrap: false, striped: true, collapsible:true, pageSize: 10,//每页显示的记录条数，默认为10 pageList: [5,10,20],//可以设置每页记录条数的列表 // url:param.action+'?id='+param.id+'&t='+Math.random(), onDblClickRow:function(rowIndex, rowData){// var callback = eval(param.dbClick);// if(callback)// callback(rowData[_peConfig.idField]); //添加双击事件，修改行，传入主键 relatedData(param.action,rowData[_peConfig.idField]); //显示详细信息，传入主键 }, onLoadSuccess:function(data){// var _parentDiv = $('.pagination-btn-separator').parent().parent().parent;// alert(_parentDiv.html())// _parentDiv.append("<td><input id=pagerSearch class='mini-textbox-input' searcher='123' prompt='请输入查询值' style='width:200px' /></td>");// alert(_parentDiv.parents().find("tr").html())// _parentDiv.parents().find("tr").append("<td><input id=pagerSearch class='mini-textbox-input' searcher='123' prompt='请输入查询值' style='width:200px' /></td>");// _parentDiv.parents().find("tr").append("<td><div class='pagination-btn-separator'></div></td><td>"+htm+"</td>"); }, loadMsg:"正在载入...", sortName: _peConfig.sortName, sortOrder: _peConfig.sortOrder, height:"300", width:"auto", remoteSort: false, idField:_peConfig.idField, frozenColumns:[[ {field:'ck',checkbox:_peConfig.checkable}, {title:_peConfig.title,field:_peConfig.field,hidden:true,width:"0",sortable:_peConfig.sortable}, {title:_fzConfig.title,field:_fzConfig.field,width:_fzConfig.width,sortable:_fzConfig.sortable} ]], columns:[[ ]], pagination:true, rownumbers:true }); 然后填充模版上的一写内容...datagrid在分页按钮上自动绑定了事件，当点击下一页会触发onSelectPage函数，这时就可以对数据分页进行操作了~var p = $('#mainTable').datagrid('getPager'); if (p){ $(p).pagination({ onSelectPage:function(pageNumber, pageSize){ param = $.extend(param,{page:pageNumber,rows:pageSize});// $(this).pagination('loading'); loadData(param);//充载 $(this).pagination('loaded'); }, onBeforeRefresh:function(pageNumber,pageSize){ $(this).pagination('loading'); //progress bar }, onRefresh:function(){ $(this).pagination('loaded'); } }); }这时会对datagrid的属性做重载，界面上的数据都会被刷新掉，那当前页，每页条数都会被刷新。这时就需要下面$("#mainTable").datagrid('getPager').pagination({pageSize:param.rows,pageNumber:param.page});//分页关键这样就OK。 分页完成，后台需要接收当前页和每页条数作为分页查询条件，后台上的一些分页逻辑和语句就不贴出来了
