easyui +springMVC+MyBatis datagrid分页
@Controller @RequestMapping("/department") public class DepartmentController { @Resource private DepartmentService departmentService; private OutPutTool OutPutTool = new OutPutTool(); @RequestMapping("selectAll") public String select(@RequestParam(value="page",required=false) String page,@RequestParam(value="rows",required=false) String rows,Department department,HttpServletResponse res) throws IOException{ int start=(Integer.parseInt(page)-1)*Integer.parseInt(rows); int pagesize=Integer.parseInt(rows); Map<String,Object> map=new HashMap<String,Object>(); map.put("start", start); map.put("size", pagesize); List<Department> list=departmentService.selectAll(map); int totl=departmentService.count(); JsonPublic jsonPublic=new JsonPublic(); jsonPublic.setRows(list); jsonPublic.setTotal(totl); OutPutTool.successOutJson(res, jsonPublic); return null; }
easyui datagrid 空间封装的很好，对分页的操作 ，前端会自然地出来 page 和rows值
返回的json符合页面的格式即可
<script type="text/javascript"> $(function(){ /** * 对于form表单的验证 */ //数值验证组件 $('#age').numberbox({ min:0 , max:150 , required:true , missingMessage:'年龄必填!' , precision:0 }); //日期组件 $('#birthday').datebox({ required:true , missingMessage:'生日必填!' , editable:false }); $('#salary').numberbox({ min:1000 , max:20000 , required:true , missingMessage:'薪水必填!' , precision:2 }); //日期时间组件 $('#startTime,#endTime').datetimebox({ required:true , missingMessage:'时间必填!' , editable:false }); var flag ; //undefined 判断新增和修改方法 /** * 初始化数据表格 */ $('#t_dept').datagrid({ idField:'id' , //只要创建数据表格 就必须要加 ifField title:'部门管理' , //width:1300 , fit:false, //height:450 , url:'department/selectAll' , fitColumns:true , striped: true , //隔行变色特性 //nowrap: false , //折行显示 为true 显示在一会 loadMsg: '数据正在加载,请耐心的等待...' , rownumbers:true , //singleSelect:true , //单选模式 //remoteSort: false , //sortName: 'salary' , //sortOrder: 'desc' , rowStyler: function(index ,record){ if(record.age > 25){ return "background:red"; } // console.info(index); // console.info(record); } , frozenColumns:[[ //冻结列特性 ,不要与fitColumns 特性一起使用 { field:'ck' , width:50 , checkbox: true } ]], columns:[[ { field:'id' , title:'部门编号' , width:100 , }, { field:'departmentname' , title:'部门名称' , width:100 , align:'center' , styler:function(value , record){ if(value == 'admin'){ return 'background:blue;'; } } }, { field:'telephonenum' , title:'联系电话' , width:100 , },{ field:'faxnum' , title:'传真号码' , width:100 , sortable : true } ]] , pagination: true , pageSize: 10 , pageList:[5,10,15,20,50] , toolbar:[ { text:'新增部门' , iconCls:'icon-add' , handler:function(){ flag = 'add'; $('#mydialog').dialog({ title:'新增部门' }); //$('#myform').find('input[name!=sex]').val(""); $('#myform').get(0).reset(); //$('#myform').form('clear'); $('#mydialog').dialog('open'); } },{ text:'修改部门' , iconCls:'icon-edit' , handler:function(){ flag = 'edit'; var arr =$('#t_dept').datagrid('getSelections'); if(arr.length != 1){ $.messager.show({ title:'提示信息!', msg:'只能选择一行记录进行修改!' }); } else { $('#mydialog').dialog({ title:'修改用户' }); $('#mydialog').dialog('open'); //打开窗口 $('#myform').get(0).reset(); //清空表单数据 $('#myform').form('load',{ //调用load方法把所选中的数据load到表单中,非常方便 id:arr[0].id , username:arr[0].username , password:arr[0].password , sex:arr[0].sex , age:arr[0].age , birthday:arr[0].birthday , city:arr[0].city , salary:arr[0].salary , startTime:arr[0].startTime, endTime:arr[0].endTime , description:arr[0].description }); } } },{ text:'删除部门' , iconCls:'icon-remove' , handler:function(){ var arr =$('#t_dept').datagrid('getSelections'); if(arr.length <=0){ $.messager.show({ title:'提示信息!', msg:'至少选择一行记录进行删除!' }); } else { $.messager.confirm('提示信息' , '确认删除?' , function(r){ if(r){ var ids = ''; for(var i =0 ;i<arr.length;i++){ idss.push(arr[i].id); } var id = idss.join(","); $.post('department/delete' , {id:id} , function(result){ //1 刷新数据表格 $('#t_dept').datagrid('reload'); //2 清空idField $('#t_dept').datagrid('unselectAll'); //3 给提示信息 $.messager.show({ title:'提示信息!' , msg:'操作成功!' }); }); } else { return ; } }); } } },{ text:'查询部门' , iconCls:'icon-search' , handler:function(){ $('#lay').layout('expand' , 'north'); } } ] }); /** * 提交表单方法 */ $('#btn1').click(function(){ if($('#myform').form('validate')){ $.ajax({ type: 'post' , url: flag=='add'?'department/insert':'department/update' , cache:false , data:$('#myform').serialize() , dataType:'json' , success:function(result){ //1 关闭窗口 $('#mydialog').dialog('close'); //2刷新datagrid $('#t_dept').datagrid('reload'); //3 提示信息 $.messager.show({ title:result.status , msg:result.message }); } , error:function(result){ $.meesager.show({ title:result.status , msg:result.message }); } }); } else { $.messager.show({ title:'提示信息!' , msg:'数据验证不通过,不能保存!' }); } }); /** * 关闭窗口方法 */ $('#btn2').click(function(){ $('#mydialog').dialog('close'); }); $('#searchbtn').click(function(){ $('#t_dept').datagrid('load' ,serializeForm($('#mysearch'))); }); $('#clearbtn').click(function(){ $('#mysearch').form('clear'); $('#t_dept').datagrid('load' ,{}); }); }); //js方法：序列化表单 function serializeForm(form){ var obj = {}; $.each(form.serializeArray(),function(index){ if(obj[this['name']]){ obj[this['name']] = obj[this['name']] + ','+this['value']; } else { obj[this['name']] =this['value']; } }); return obj; } </script>
页面这样写即可 ，返回的json格式
{"code":0,"rows":[{"departmentname":"开发部","faxnum":"88888888","id":1,"telephonenum":"88888888"},{"departmentname":"人事部门","faxnum":"88888888","id":2,"telephonenum":"88888888"},{"departmentname":"财务部","faxnum":"88888888","id":3,"telephonenum":"88888888"}],"total":6}
希望此文对大家有所帮助
