本次Spring boot实现分页的方法为使用工具PageInfo类，废话不多说直接上代码
控制层Controller设计
@RequestMapping(value = "/userList", method = RequestMethod.GET)
private String userList(Model model, @RequestParam(defaultValue = "1") int pageNum,
@RequestParam(required = false) String userName,
@RequestParam(required = false) Integer flag) {
Users users = new Users();
//两个筛选条件，从前台传递过来
if (!EmptyUtil.isEmpty(userName)) {
users.setUserName(userName);
}
if (!EmptyUtil.isEmpty(flag)) {
if (flag != 2) {
users.setUserStatus(flag);
}
}
//pageNum:当前页码，pageSize:每页显示条数,条件为对象
//PageInfo不能用于连表查询，只能在select的第一个语句作为判断分页的条件
PageInfo<Users> page = userService.page(pageNum, 5, users);
//保证不是空指针，index是用于页码设置的
//为了不让前台页码全部显示，所以将所有页码设计为一个大数组再根据前台传递的页码分为合适的小数组
if (page.getList() != null) {
List<Integer> index = PageUtil.getIndex(pageNum, page.getPages(), 2);
model.addAttribute("index", index);
}
model.addAttribute("page", page);
model.addAttribute("flag", users.getUserStatus());
model.addAttribute("userName", users.getUserName());
return "admin/user/user_list";
}
其中用到的切分数组的工具类如下
public class PageUtil {
//pagePages：有多少条数据，pageNum：当前页码数，footerSize：页脚需要多少个
public static List<Integer> getIndex(int pageNum, int pagePages, int footerSize) {
ArrayList<Integer> arrayList = new ArrayList<>();
for (int i = 1; i <= pagePages; i++) {
arrayList.add(i);
}
//通过工具将大数组切为等比小数组，splitNum为上面的除数
List<List<Integer>> index = PageUtil.getSplitList(footerSize, arrayList);
//确定选择是哪个小数组
int num = (pageNum - 1) / footerSize;
return index.get(num);
}
public static <T> List<List<T>> getSplitList(int splitNum, List<T> list) {
List<List<T>> splitList = new LinkedList<>();
// groupFlag >= 1
int groupFlag = list.size() % splitNum == 0 ? (list.size() / splitNum) : (list.size() / splitNum + 1);
for (int j = 1; j <= groupFlag; j++) {
if ((j * splitNum) <= list.size()) {
splitList.add(list.subList(j * splitNum - splitNum, j * splitNum));
} else if ((j * splitNum) > list.size()) {
splitList.add(list.subList(j * splitNum - splitNum, list.size()));
}
}
return splitList;
}
}
业务逻辑层ServiceImpl设计
public PageInfo<Users> page(int pageNum, int pageSize, Users users) {
PageHelper.startPage(pageNum, pageSize);
// 设置分页查询条件，这里使用的tk.mybatis工具类，其他自行设计
Example example = new Example(Users.class);
Example.Criteria criteria = example.createCriteria();
if (!EmptyUtil.isEmpty(users.getUserName())) {
criteria.andLike("userName", "%" + users.getUserName() + "%");
}
if (!EmptyUtil.isEmpty(users.getUserStatus())) {
criteria.andEqualTo("userStatus", users.getUserStatus());
}
List<Users> admins1 = usersMapper.selectByExample(example);
if (EmptyUtil.isEmpty(admins1)) {
return new PageInfo<>();
}
return new PageInfo<>(admins1);
}
前台代码设计
<div class="widget-body am-fr">
<div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
<div class="am-form-group">
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">
<a th:href="@{'/admin/userAdd'}"
class="am-btn am-btn-default am-btn-success"><span
class="am-icon-plus"></span> 新增
</a>
</div>
</div>
</div>
</div>
<div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
<div class="am-form-group tpl-table-list-select">
<label>
<select name="flag" data-am-selected="{btnSize: 'sm'}" onchange="select()">
<option value="2" th:selected="${flag==null}">
所有用户
</option>
<option value="1" th:selected="${flag==1}">
已启用用户
</option>
<option value="0" th:selected="${flag==0}">
禁用用户
</option>
</select>
</label>
</div>
</div>
<div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
<div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
<input th:value="${userName}" id="userName" name="userName" type="text"
class="am-form-field"
placeholder="用户姓名">
<span class="am-input-group-btn">
<a onclick="select()"
class="am-btn am-btn-default am-btn-success tpl-table-list-field am-icon-search"></a>
</span>
</div>
</div>
<div th:if="${page.getList()==null}" class="am-u-sm-12">
表中无数据
</div>
<div th:style="'display:' + @{(${page.getList()==null} ? 'none')} + ''" class="am-u-sm-12">
<div class="am-scrollable-horizontal ">
<table width="100%" class="am-table am-table-compact am-text-nowrap tpl-table-black ">
<thead>
<tr>
<th>用户ID</th>
<th>用户姓名</th>
<th>用户账号</th>
<th>用户创建时间</th>
<th>用户头像</th>
<th>用户状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${page.getList()}" class="gradeX">
<td th:text="${user.userId}"></td>
<td th:text="${user.userName}"></td>
<td th:text="${user.userEmail}"></td>
<td th:text="${#dates.format(user.userCreateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<img th:src="${user.userPhoto}" width="50" height="50" alt="140*140" class="am-img-thumbnail am-circle">
</td>
<td th:text="${user.userStatus==1}?'启用':'禁用'"></td>
<td>
<div class="tpl-table-black-operation">
<a th:href="@{'/admin/userUpdate?userId='+${user.userId}}">
<i class="am-icon-pencil"></i> 编辑
</a>
<a th:href="@{'/admin/userDelete?userId='+${user.userId}}"
class="tpl-table-black-operation-del" onclick="return del()">
<i class="am-icon-trash"></i> 删除
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div th:style="'display:' + @{(${page.getList()==null} ? 'none')} + ''" class="am-u-lg-12 am-cf">
<div class="am-fr">
<ul class="am-pagination tpl-pagination">
<li th:if="${page.pageNum!=1}">
<a onclick="page1()">首页</a>
</li>
<li th:if="${page.hasPreviousPage==true}">
<a onclick="page2()">«</a>
</li>
<li th:each="i : ${index}" th:class="${page.pageNum==i}? 'am-active'">
<a th:text="${i}" onclick="page3(this)"></a>
</li>
<li th:if="${page.hasNextPage==true}">
<a onclick="page4()">»</a>
</li>
<li th:if="${page.pageNum!=page.pages}">
<a onclick="page5()">末页</a>
</li>
</ul>
</div>
<!--<div class="am-fr">
<ul class="am-pagination tpl-pagination">
<li th:if="${page.pageNum!=1}">
<a th:href="@{'/admin/adminList?pageNum='+1}">首页</a>
</li>
<li th:if="${page.hasPreviousPage==true}">
<a th:href="@{'/admin/adminList?pageNum='+${page.pageNum-1}}">«</a>
</li>
<li th:each="i : ${index}" th:class="${page.pageNum==i}? 'am-active'">
<a th:text="${i}" th:href="@{'/admin/adminList?pageNum='+${i}}"></a>
</li>
<li th:if="${page.hasNextPage==true}">
<a th:href="@{'/admin/adminList?pageNum='+${page.pageNum+1}}">»</a>
</li>
<li th:if="${page.pageNum!=page.pages}">
<a th:href="@{'/admin/adminList?pageNum='+${page.pages}}">末页</a>
</li>
</ul>
</div>-->
</div>
</div>
js文件设计（根据不同的条件设计，比较混乱没有整合，自行理解）
<script language="javascript" type="text/javascript">
function del() {
return confirm("确定要删除吗？")?true:false;
}
function select() {
//获取被选中的option标签
var flag = $('select option:selected').val();
var userName = $('#userName').val();
if (flag === '2' && userName === '') {
window.location.href = "/admin/userList";
}
if (flag !== '2' && userName === '') {
window.location.href = "/admin/userList?flag=" + flag;
}
if (flag === '2' && userName !== '') {
window.location.href = "/admin/userList?userName=" + userName;
}
if (flag !== '2' && userName !== '') {
window.location.href = "/admin/userList?userName=" + userName + "&flag=" + flag;
}
}
function page1() {
var flag = $('select option:selected').val();
var userName = $('#userName').val();
if (flag === '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + 1;
}
if (flag !== '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + 1 + "&flag=" + flag;
}
if (flag === '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + 1 + "&userName=" + userName;
}
if (flag !== '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + 1 + "&flag=" + flag + "&userName=" + userName;
}
}
function page2() {
var flag = $('select option:selected').val();
var userName = $('#userName').val();
if (flag === '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pageNum-1}]];
}
if (flag !== '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pageNum-1}]] + "&flag=" + flag;
}
if (flag === '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pageNum-1}]] + "&userName=" + userName;
}
if (flag !== '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pageNum-1}]] + "&flag=" + flag + "&userName=" + userName;
}
}
function page3(e) {
var flag = $('select option:selected').val();
var userName = $('#userName').val();
var pageNum = $(e).text();
if (flag === '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + pageNum;
}
if (flag !== '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + pageNum + "&flag=" + flag;
}
if (flag === '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + pageNum + "&userName=" + userName;
}
if (flag !== '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + pageNum + "&flag=" + flag + "&userName=" + userName;
}
}
function page4() {
var flag = $('select option:selected').val();
var userName = $('#userName').val();
if (flag === '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pageNum+1}]];
}
if (flag !== '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pageNum+1}]] + "&flag=" + flag;
}
if (flag === '2' && userName !== '') {
window.location.href = "/admin/adminList?pageNum=" + [[${page.pageNum+1}]] + "&userName=" + userName;
}
if (flag !== '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pageNum+1}]] + "&flag=" + flag + "&userName=" + userName;
}
}
function page5() {
var flag = $('select option:selected').val();
var userName = $('#userName').val();
if (flag === '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pages}]];
}
if (flag !== '2' && userName === '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pages}]] + "&flag=" + flag;
}
if (flag === '2' && userName !== '') {
window.location.href = "/admin/adminList?pageNum=" + [[${page.pages}]] + "&userName=" + userName;
}
if (flag !== '2' && userName !== '') {
window.location.href = "/admin/userList?pageNum=" + [[${page.pages}]] + "&flag=" + flag + "&userName=" + userName;
}
}
</script>
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
