【EasyUI篇】Pagination分页组件

最新推荐文章于 2024-08-10 08:26:26 发布

ooyhao

最新推荐文章于 2024-08-10 08:26:26 发布

阅读量3.4k

点赞数

文章标签： EasyUI Pagination

本文链接：https://blog.csdn.net/ooyhao/article/details/82721986

版权

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

17.Pagination分页组件

注意

这个组件需要配合后台实现，老规矩，使用SSM

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Pagination</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/Pagination.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
</head>
<body>

    <%--class加载方式--%>
    <%--<div id="box" class="easyui-pagination" data-options="total:2000,pageSize:10"
         style="background: #efefef;border: 1px solid #ccc;">
    </div>
--%>
    <div id="content" class="easyui-panel"
         style="height: 250px;"
        data-options="href:'http://localhost:8081/easyui/getUserByPagination.action?page=1&pageSize=2'"
    >

    </div>
    <div id="box" style="background: #efefef;border: 1px solid #ccc;">
    </div>

</body>
</html>

JS文件

$(function () {

    var size = 4;
    $('#box').pagination({
        total:11,
        pageSize:2,
        pageNumber:1,
        pageList:[2,4,6,8],
        buttons:[
            {
                iconCls:'icon-add',
                handler:function () {
                    alert("add");
                }
            },'-',{
                iconCls:'icon-edit',
                handler:function () {
                    alert("edit");
                }
            }
        ],
        /*layout:[
            /!*设置显示的分页按钮*!/
            'first','sep','last','sep','list','prev','next','refresh','manual','links'
        ],*/
        showPageList:true,
        showRefresh:true,
        // beforePageText:'第',
        // afterPageText:'共6页',
        // displayMsg:'显示1到2,共11记录',
        onSelectPage : function (pageNumeber,pageSize) {
            $("#content").panel('refresh',"http://localhost:8081/easyui/getUserByPagination.action?page="+pageNumeber+"&pageSize="+pageSize);
        },
        onBeforeRefresh:function (pageNumber,pageSize) {
            //返回false可以在取消刷新操作
            alert("pageNumeber:"+pageNumber+", pageSize:"+pageSize);
        },
        onRefresh:function (pageNumber,pageSize) {
            alert("pageNumeber:"+pageNumber+", pageSize:"+pageSize);
        },
        onChangePageSize:function (pageSize) {
            //改变pageSize时触发
            alert("pageSize:"+pageSize);
        },
    });



//------------- 方法列表 -------------------
    //返回属性对象
    console.log($("#box").pagination('options'));
    //将刷新按钮变成loading状态
    $("#box").pagination('loading');
    //将刷新按钮变成已加载完loaded状态
    $("#box").pagination('loaded');
    $(document).click(function () {
        //这里只是改变了前端控件
        $("#box").pagination('refresh',{
            pageSize:size,
        });
        //会重新访问服务器
        // $("#box").pagination('select',2);
    });


});

Mapper文件

<select id="getUserByPagination" resultType="User">
    select * from tb_user limit #{start} , #{pageSize} ;
</select>

ServiceImpl文件

@Override
public List<User> getUserByPagination(int page, int pageSize) {
     int start = (page-1)*pageSize;
     return userMapper.getUserByPagination(start,pageSize);
}

效果图