EasyUI 分页与java交互

EasyUI 分页：

     必须接收两个参数，参数名不能变，分别是：

                           Integer page,       当前页码

                           Integer rows         每页显示的页数

     EASUI自动传参不需要自己传参数，Controller层直接接收即可

@RequestMapping("getMenu")
    @ResponseBody
    public Map<String, Object> getMenu(Integer page,Integer rows) {
        Map<String, Object> menu = adminService.getMenu(page,rows);
        return menu;
    }

Service层第一个参数需计算：Integer indexPage = (page-1)*rows;得到本页第一条数据的索引  

  @Override
    public Map<String, Object> getMenu(Integer page,Integer rows) {
        Map<String, Object> map = new HashMap<String, Object>();
        Integer indexPage = (page-1)*rows;
        List<Map<String, Object>> menu = adminDao.getMenu(indexPage,rows);
        int total = adminDao.countMenu();
        map.put("rows", menu);
        map.put("total", total);
        return map;

    }

返回：返回值为map集合，包含查询数据 List<Map<String, Object>>和数据库数据的总条数total

                 map.put("rows", menu);         每页显示的数据

                 map.put("total", total);         用于easyui自动计算一共有多少页

          注释：返回的key值不能变 否则EasyUI无法渲染

页面如下：  

 <table id="dg"></table>
    <script type="text/javascript">

    $(function(){

            $('#dg').datagrid({    
                url:'<%=basePath%>/admin/getMenu',    
                columns:[[
                    {field:'*****',title:'**',width:200,align:'center'},
                    {field:'*********',title:'***',width:200,align:'center'},
                    {field:'******',title:'*****',width:200,align:'center'},
                    {field:'**********',title:'*****',width:200,align:'center'},    
                    {field:'******',title:'***',width:200,align:'center'},    
                    {field:'***********',title:****',width:200,align:'center'}    
                ]],
                pagination:true,//开启分页
                fit:true//分页至底部
            });

        })
         
    </script>
        

                    field 必须与表字段相同                    title 为表头，自由定义

在使用EasyUI时，页面需要引用

<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/static/js/easyui/themes/icon.css">
<script type="text/javascript" src="<%=basePath%>/static/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/static/js/easyui/jquery.easyui.min.js"></script>