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 的那个列表，如果有问题可以在后面问我。