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

最新推荐文章于 2020-09-18 21:03:50 发布

低头先生

最新推荐文章于 2020-09-18 21:03:50 发布

阅读量762

点赞数

分类专栏： easyui 文章标签： easyui 分页

本文链接：https://blog.csdn.net/qq_36295655/article/details/69938238

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对于做后台系统而言，使用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

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录