datagraid实现分页效果

最新推荐文章于 2018-05-23 11:13:49 发布

发疯的man

最新推荐文章于 2018-05-23 11:13:49 发布

阅读量783

点赞数

本文链接：https://blog.csdn.net/lzh657083979/article/details/75808844

版权

easyui 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

结合springmvc和mybatis和easyui
思路：datagraid有个特点，就是页面加载的时候自动从url中获取数据，所以只需要跳转到分页页面并写好url对应的action就ok，剩下的就交给easyui帮你做好啦，datagraid向后台会自动提交两个参数，page（当前是第几页）、rows（每页多少行），后台用int类型来接收即可。然后后台传过来的json数据（一定是json数据）datagraid会自动解析rows（类型是List，每页显示的数据）和total（类型是int，意思是总的个数），然后把数据封装返回

action

@RequestMapping("/userList.action")
    public @ResponseBody CustomResult  userList(@RequestParam(value="page",required=false) int page,
            @RequestParam(value="rows",required=false) int rows,
            @RequestParam(value="pname",required=false) String pname,
            HttpServletResponse reponse) throws IOException{
        reponse.reset();
        CustomResult resu=new CustomResult();
        //---------------------------------------------------------
        /*定义count方法的参数*/
        Map<String, Object> countMap =new HashMap<String,Object>();
        if(pname==null){
            pname="";          /*模糊查询*/
        }
        countMap.put("pname", pname);
        /*得到满足条件所有数据的个数*/
        int totalCount=userService.count(countMap);
        //-----------------------------------------------------------
        begin=(page-1)*rows;
        user_map.put("start", begin);
        user_map.put("pageSize", rows);
        System.out.println(page+"======="+rows);
        List<User> userList=userService.getByPage(user_map);
        //----------------------------------------------------
        resu.setRows(userList);
        resu.setTotal(totalCount);

        return resu;
    }

封装数据

package com.lzh.hrm.util;

import java.util.List;

public class CustomResult {
     private int total;  
     private List rows;
    public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }
    public List getRows() {
        return rows;
    }
    public void setRows(List rows) {
        this.rows = rows;
    } 

}

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="fmt"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <table id="list" class="easyui-datagrid" >   
    </table> 
<div id="tb" style="height:auto">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="accept()">Accept</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div> 
    <script>
        $(function(){
            $('#list').datagrid({
                pagination:true,
                 columns:[[
                        {field:'',checkbox:true},
                        {field:'id',title:'编号',width:50,align:'center'},  
                        {field:'loginname',title:'登陆名',width:100,align:'center'},    
                        {field:'password',title:'登录密码',width:100,align:'center'},    
                        {field:'status',title:'用户状态',width:30,align:'center',
                            formatter:
                                function(value,row,index){
                                    if(value=0)
                                        return "有效";
                                    if(value=1)
                                        return "无效";
                                }
                        },
                        {field:'createdate',title:'创建时间',width:100,align:'center',
                            formatter:function(value,row,index){  
                                 var unixTimestamp = new Date(value);  
                                 return unixTimestamp.toLocaleString();  
                            }      
                        },
                        {field:'username',title:'用户名称',width:100,align:'center'} ,
                        {field:'opt',title:'操作',width:100,align:'center',  
                            formatter:function(value,rec,index){  
                                var s = '<a href="#" mce_href="#" onclick="view(\''+ rec.xsbh + '\')">查看</a> ';  
                                var e = '<a href="#" mce_href="#" onclick="edit(\''+ rec.xsbh + '\')">编辑</a> ';  
                                var d = '<a href="#" mce_href="#" onclick="del(\''+ index +'\')">删除</a> ';  
                                return s+e+d;  
                            }  
                          }  

                ]],
                url: 'userList.action',
                toolbar:'#tb',
                border:false,
                singleSelect: false,
                title: '用户管理',
                pageSize: 5,
                pageList: [5, 10, 15],
                total : 100,
                iconCls:"icon-edit",
                fitColumns:true,
                rownumbers:true,
                showPageList:false,
                loadMsg : '数据加载中,请稍候......'

            });
             //设置分页控件
            /*  var p=$('#list').datagrid('getPager');


              p.pagination({

                  pageSize: 5,


                  beforePageText: '第',//页数文本框前显示的汉字
                  afterPageText: '页    共 ${page.totalSize} 页', 
                  displayMsg: '当前显示 ${page.totalSize} - {to} 条记录   共 ${page.recordCount} 条记录'
              }); */
        })

    </script>
</body>
</html>