Spring Boot + JPA + Freemarker + Bootstrap 实现分页

Freemarker代码

onclick里的函数用的是ajax

<#--总页数-->
<#assign totalPages = page.totalPages>
<#--总元素数-->
<#assign totalElements = page.totalElements>
<#--当前页数 加1是因为java传过来的page是以0开始的 -->
<#assign number = page.number+1>
<#--第一页-->
<#assign first = page.first>
<#--最后一页-->
<#assign last = page.last>

<nav aria-label="Page navigation">
    <ul class="pagination pagination-lg  justify-content-center">

    <#--上一页-->
    <#if first>
        <li class="page-item">
            <a class="page-link" href="#">上一页</a>
        </li>
    <#else>
        <li class="page-item">
            <a class="page-link" onclick="page('?page=${number-2}&size=5')">上一页</a>
        </li>
    </#if>

    <#--小于等于10页全部显示-->
    <#if totalPages <= 10>
        <#list 1..totalPages as pageIndex>
            <#if number == pageIndex>
                <li class="page-item active">
                    <a class="page-link" onclick="page('?page=${pageIndex-1}&size=5')">${pageIndex}</a>
                </li>
            <#else>
                <li class="page-item ">
                    <a class="page-link" onclick="page('?page=${pageIndex-1}&size=5')">${pageIndex}</a>
                </li>
            </#if>
        </#list>
    </#if>

    <#--大于10页：显示前5页，最后3页，中间用 ...-->
    <#if totalPages gt 10>
    <#--显示前5页-->
        <#list 1..5 as pageIndex>
            <#if number == pageIndex>
                <li class="page-item active">
                    <a class="page-link" onclick="page('?page=${pageIndex-1}&size=5')">${pageIndex}</a>
                </li>
            <#else>
                <li class="page-item">
                    <a class="page-link" onclick="page('?page=${pageIndex-1}&size=5')">${pageIndex}</a>
                </li>
            </#if>
        </#list>

    <#--中间部分的显示 ...  number: currentPage, 区间逻辑的判断-->
        <#if number == 6 >
            <li class="page-item active">
                <a class="page-link" href="wotuView?page=${number}&size=20">${number}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">...</a>
            </li>
        <#elseif number == totalPages-3>
            <li class="page-item">
                <a class="page-link" href="#">...</a>
            </li>
            <li class="page-item active">
                <a class="page-link" href="wotuView?page=${number}&size=20">${number}</a>
            </li>
        <#elseif number gt 6 && number lt totalPages-3>
            <li class="page-item">
                <a class="page-link" href="#">...</a>
            </li>
            <li class="page-item active">
                <a class="page-link" href="wotuView?page=${number}&size=20">${number}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">...</a>
            </li>
        <#else>
            <li class="page-item">
                <a class="page-link" href="#">...</a>
            </li>
        </#if>

    <#--显示最后3页-->
        <#list totalPages-2..totalPages as pageIndex>
            <#if number == pageIndex>
                <li class="page-item active">
                    <a class="page-link" onclick="page('?page=${pageIndex-1}&size=5')">${pageIndex}</a>
                </li>
            <#else>
                <li class="page-item">
                    <a class="page-link" onclick="page('?page=${pageIndex-1}&size=5')">${pageIndex}</a>
                </li>
            </#if>
        </#list>
    </#if>

    <#--下一页-->
    <#if last>
        <li class="page-item">
            <a class="page-link" href="#">下一页</a>
        </li>
    <#else>
        <li class="page-item">
            <a class="page-link" onclick="page('?page=${number}&size=5')">下一页</a>
        </li>
    </#if>
    </ul>
    <div class="center">总共 ${totalPages} 页， ${totalElements} 条记录</div>
</nav>

将Page传入Freemarker中

使用userQueryService里的findUserNoCriteria函数可得到指定大小的User的Page

Page<User> datas = userQueryService.findUserNoCriteria(page, size);
modelMap.addAttribute("page", datas);

userQueryService哪里来的？

1. 创建UserRepository
   注意接口是可以多继承的

@Repository("userRepository")
public interface UserRepository 
				extends JpaRepository<User, String> , 
						JpaSpecificationExecutor<User> {
   

}

2. 创建UserQueryService

public interface UserQueryService {
	//分页
    Page<User> findUserNoCriteria(Integer page, Integer size);
    //将根据user查找到的结果分页
    Page<User> findUserCriteria(Integer page, Integer size, User user);
}

3. 实现UserQueryService

@Service(value="userQueryServiceImpl")
public class UserQueryServiceImpl implements UserQueryService{

    @Resource
    private UserRepository userRepository;
    @Override
    public Page<User> findUserNoCriteria(Integer page, Integer size) {
        Pageable pageable = new PageRequest(page, size, Sort.Direction.ASC, "name");
        return userRepository.findAll(pageable);
    }

    @Override
    public Page<User> findUserCriteria(Integer page, Integer size, User user) {
        Pageable pageable = new PageRequest(page, size, Sort.Direction.ASC, "_id");
        Page<User> bookPage = userRepository.findAll((Specification<User>) (root, query, criteriaBuilder) -> {
            Predicate p1 = criteriaBuilder.equal(root.get("name").as(String.class), user.getName());
            Predicate p2 = criteriaBuilder.equal(root.get("psw").as(String.class), user.getPsw());
            Predicate p3 = criteriaBuilder.equal(root.get("_id").as(String.class), user.get_id());
            query.where(criteriaBuilder.and(p1,p2,p3));
            return query.getRestriction();
        },pageable);
        return bookPage;
    }
}

4. 得到userQueryService

    @Resource
    private UserQueryService userQueryService;