easyui pagination spring boot 分页程序实现

分页的思想，第一要知道每个页面计划展示多少个item，还要知道总数量是多少 allcount ，可以计算出多少pages ，
首先要用总条数 % 每页的个数看看余数是否大于0 如果大于0 ，说明页数要+1 ，如果余数为0 则不用+1 ，公式如下：
pages = （allcount%item）>0 ? (allcount/item)+1 :allcount/item;

html 的页面如下，主要是一个easyui-datagrid 加上参数的形式传递 pageNumber 当前页面的number ，pagesize：每个页面显示的条数。

<script th:src="@{/js/user/user.js}"></script>
<!-- <table id="userlist" class="easyui-datagrid" title="用户列表" style="width:auto;height:auto"
        data-options="rownumbers:true,singleSelect:true,url:'/manager/user/userlist',method:'get',toolbar:user.toolbar">
         -->
<table id="userlist" class="easyui-datagrid" title="用户列表" style="width:auto;height:auto;"
        data-options="rownumbers:true,singleSelect:true,url:'/manager/user/userlist',toolbar:user.toolbar,queryParams:{pageNumber:1,pageSize:15}">

    <thead>
    <tr>
        <th data-options="field:'usertel',width:120">手机号</th>
        <th data-options="field:'username',width:120">用户名称</th>
        <th data-options="field:'usersex',width:50,formatter:baseutil.formatter_sex">性别</th>
        <th data-options="field:'birthday',width:150,formatter:baseutil.formatter_birthday">生日</th>
        <th data-options="field:'createtime',width:150,formatter:baseutil.formatter_time">创建时间</th>
        <th data-options="field:'userstatus',width:100,formatter:baseutil.formatter_status">用户状态</th>
        <th data-options="field:'userid',width:120,hidden:true">用户编码</th>
    </tr>
    </thead>
</table>
<div id="userlist_pagination" style="background:#efefef;border:1px solid #ccc;"></div>

js 的文件显示，我的js 是专门处理一个pageutil如下,文件名称 pageutil.js

var pageutil = {};
/**
 * allcountpath : 查询所有条数的url路径
 * page_div : 在list页面的 分页条div
 * page_list : 在list页面的主 list
 */
pageutil.pagination = function( allcountPath, page_div , page_list){
     $.ajax({ url: allcountPath, success: function(data){
            $('#'+page_div).pagination({
                total:data,
                pageSize:10,
                showPageList:true,
                showRefresh:false,
                //displayMsg: '',
                displayMsg:'当前显示从{from}到{to},共{total}记录',
                pageList: [5,10,20,30,40],
                beforePageText: '第',
                afterPageText: '页    共 {pages} 页',
                onSelectPage:function(pageNumber, pageSize){
                    $('#'+page_list).datagrid('load',{
                        pageNumber: pageNumber,
                        pageSize: pageSize
                    });

                }

            });


     }});

}

用户列表的js 文件名称 user.js ，这里需要注意的是，页面初始化的时候就要去查询总的条数，我的pageutil 里面调用ajax的方式去查询后台服务，这里给他传递查询的路径。

//初始化 分页数据
$(document).ready(function (){
    var countPath = systemNamePath+"/user/findallcount";
    //分页单独的一个分页类
    pageutil.pagination(countPath,'userlist_pagination','userlist');
});

后台的java处理，主要在controller 里面处理，两个主要的方法，第一是查询list方法，第二是查询总条数方法。如下：

查询list方法，根据

    @RequestMapping(value="/userlist")
    @ResponseBody
    public List<User> list(@RequestParam int pageNumber ,  @RequestParam int pageSize ){
        List<User> users = (List<User>)userMapper.queryList((pageNumber-1)*pageSize,pageSize);
        return users;
    }

查询总条数

    @RequestMapping(value = "/findallcount")
    @ResponseBody
    public long findAllCount() {
        System.out.println("-----findallcount---");
        long allcount =0l;
        try {
            allcount = userMapper.findcount();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return allcount;
    }

后记，如果直接复制我的代码，估计会有些小问题，主要是在list 的那个列表，如果有问题可以在后面问我。

easyui pagination spring boot 分页程序实现

猜你喜欢