关于easyui的分页功能使用和总结

来源：互联网发布：刚开淘宝店铺怎么装修编辑：程序博客网时间：2024/04/27 14:01

对于做后台系统而言，使用easyui无疑是最为省时省力的。我打算将easyui的所有功能都在项目中使用一遍并将他们写成博客，那今天就来开始第一篇吧：关于分页功能的使用。

系统架构：ssm

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!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>用户列表</title><!-- 导入jquery核心类库 --><script type="text/javascript"    src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script><!-- 导入easyui类库 --><link rel="stylesheet" type="text/css"    href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css"    href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"><link rel="stylesheet" type="text/css"    href="${pageContext.request.contextPath }/js/easyui/ext/portal.css"><link rel="stylesheet" type="text/css"    href="${pageContext.request.contextPath }/css/default.css"><script type="text/javascript"    src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script><script type="text/javascript"    src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script><script type="text/javascript"    src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script><script    src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"    type="text/javascript"></script><script type="text/javascript">    // 工具栏    var toolbar = [{        id : 'button-add',        text : '新增',        iconCls : 'icon-add',        handler : doAdd    }];    // 定义标题栏    var columns = [            [ {                field : 'id',                checkbox : true,                rowspan : 2            }, {                field : 'username',                title : '用户名',                width : 80,                rowspan : 2            }, {                field : 'name',                title : '姓名',                width : 80,                rowspan : 2            },{                field : '-',                title : '操作',                width : 200,                formatter : function(value, row, index){return "<a onclick='dele(" + row.id + ")'>删除</a>  <a href='/index_01/updatePwd?id=" + row.id + "'>重置密码</a>}"            } ] ];    $(function() {        // 初始化 datagrid        // 创建grid        $('#grid').datagrid({            iconCls : 'icon-forward',            fit : true,            border : false,            rownumbers : true,            striped : true,            toolbar : toolbar,            url : "/index_01/listByPage",            idField : 'id',            columns : columns,            pagination : true,            onClickRow : onClickRow,            onDblClickRow : doDblClickRow,            singleSelect : true        });//这段代码是让easyui的样式显示        $("body").css({            visibility : "visible"        });//增加用户    function doAdd() {        location.href = "/index_01/user_add";    }//删除用户    function dele(id) {        var row = $('#grid').datagrid('getSelected');        if (row) {            $.messager.confirm('提示', '确定要删除这个用户吗?', function(r) {                if (r) {                    $.post('/index_01/user_delete?id=' + id, {                        id : id                    }, function(result) {                        if (result.success) {                            $('#grid').datagrid('reload'); // 重新加载用户列表                        } else {                            $.messager.show({ // show error message                                 title : 'Error',                                msg : result.errorMsg                            });                        }                    }, 'json');                }            });        }    }</script></head><body class="easyui-layout" style="visibility: hidden;">    <div region="center" border="false">        <table id="grid"></table>    </div></body></html>

说明：该jsp页面的关键是在function下调用后台要进行分页的方法，该方法返回的必须是json格式，才能被easyui解析，并填入表格。

controller层：

// 按分页显示所有用户    @RequestMapping("/index_01/listByPage")    @ResponseBody    public Map<String, String> getListByPage(Integer page, Integer rows) {        Integer firstResult = (page - 1) * rows;        List<User> count = service.getTotal();        long total = count.size();        List<User> list = service.getListByPage(firstResult, rows);        Map map = new HashMap();        map.put("total", total);        map.put("rows", list);        return map;    }

说明：easyui分页要求我们要传给他两个参数：page和rows。即当前页和每页的条数。但如果只传这两个参数的话会出现一个问题，就是每次翻页都只显示第一页的信息。因为他不知道你展示的信息总共有几页，所以还要传一个参数是总条数：total
思考：前端我们点击上下页是可以直接得到当前页数的，我们要做的就是将（当前页数-1）页大小得到该页第一行数，然后得到该页的所有信息，这些信息可以装进list里。这么做其实就是为了得到这样一条sql：select from user limit page,rows;

剩下的就是写个实体类user,带上get,set方法，在mapper.xml写个分页sql，在写上接口，实现类。

userMapper.xml

<select id="getListByPage" resultType="com.xyj.manager.po.User" parameterType="com.xyj.manager.po.User" >   select * from user  LIMIT #{firstResult}, #{rows}  </select>

userMapper.java

 //按分页显示用户信息    List<User>getListByPage(@Param("firstResult")Integer firstResult,@Param("rows")Integer rows);

接口和实现类省略…

好了，这样easyui的分页功能就实现了。第一次写博客可能说得不太有条理，还望多包涵，哈哈哈！！！！！

0 1