基於springboot+thymeleaf+springDataJpa自帶的分頁插件實現完整的動態分頁

實現百度搜索使用的前五后四原則，效果如下。

 

 

 下面貼出代碼，復制到前端即可，只需要域中放置page對象就可以。（springdatajpa自帶的page 注意：第一頁是按0開始算的）

<div class="page">
    
    <ul class="pagination">
        
        
        <!--上一頁數-->
        
        <li  class="page-item" th:if="${page.pageable.getPageNumber() != 0}">
            
            <a th:onclick="pageRequest([[${page.pageable.getPageNumber()-1}]])"     class="page-link"
               
               data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
                
                <span aria-hidden="true">«</span>
            
            </a>
        
        </li>
        
        <li class="page-item">
            
            <a th:onclick="pageRequest(0)" class="page-link" >首頁</a>
        
        </li>
        
        <!--前五后四分頁實現-->
        
        <!--總頁數<10-->
        
        <li th:if="${page.totalPages lt 11}" class="page-item" data-th-each="i : ${#numbers.sequence(0, page.totalPages)}"
            
            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
            
            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                
                <span data-th-text="${i+1}"></span>
            
            </a>
        
        </li>
        
        <!--總頁數>10-->
        
        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() lt 5}" class="page-item" data-th-each="i : ${#numbers.sequence(0, 9)}"
            
            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
            
            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                
                <span data-th-text="${i+1}"></span>
            
            </a>
        
        </li>
        
        
        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.totalPages lt page.pageable.getPageNumber()+5  }"
            
            class="page-item" data-th-each="i : ${#numbers.sequence(page.totalPages-10, page.totalPages-1)}"
            
            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
            
            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                
                <span data-th-text="${i+1}"></span>
            
            </a>
        
        </li>
        
        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.pageable.getPageNumber()+4 lt page.totalPages}"
            
            class="page-item" data-th-each="i : ${#numbers.sequence(page.pageable.getPageNumber()-5, page.pageable.getPageNumber()+4)}"
            
            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >
            
            <a class="page-link" th:onclick="pageRequest([[${i}]])">
                
                <span data-th-text="${i+1}"></span>
            
            </a>
        
        </li>
        
        <!--尾頁-->
        
        <li class="page-item">
            
            <a th:onclick="pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" >尾頁</a>
        
        </li>
        
        <!--下一頁-->
        
        <li  class="page-item"  th:if="${page.pageable.pageNumber} != ${page.totalPages}-1">
            
            <a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">
                
                »
            
            </a>
        
        </li>
    
    </ul>

</div>