springboot+thymeleaf+mybatis-plus實現的分頁示例 首頁 尾頁 上一頁 下一頁 尾頁 跳轉頁

html

<table>
    總記錄數：<span th:text="${total}"></span><br />
    總頁數：<span th:text="${pages}"></span><br />
    <thead>
    <tr>
        <!--<th><input type="checkbox" id="checkAll" name="checkAll"></th>-->
        <th>數據編號</th>
        <th>報名人姓名</th>
        <th>手機號</th>
        <th>車輛所在城市</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="su:${signups}">
        <!--  <td><input type="checkbox" name="checkItem" th:id="${su.getGuid()}"></td>-->
        <td th:text="${su.getGuid()}"></td>
        <td th:text="${#strings.abbreviate(su.getName(),4)}"></td>
        <td th:text="${#strings.abbreviate(su.getMobile(),6)}"></td>

    </tr>
    </tbody>
</table>
<a th:href="@{${url}+'?current=1&size=5'}">首頁</a>
<a th:href="@{${url}+'?current='+${current-1}+'&size=5'}" id="upPage">上一頁</a>
<a th:href="@{${url}+'?current='+${current+1}+'&size=5'}" id="downPage">下一頁</a>
<a th:href="@{${url}+'?current='+${pages}+'&size=5'}">尾頁</a>
<input type="number" style="width: 30px" id="skipPage" name="skipPage" min="1" th:max="${pages}" th:value="${current}"/>頁
<a th:href="@{${url}+'?current='+${pages}+'&size=5'}" id="skipbut">跳轉</a>
</body>
<script th:src="@{/webjars/jquery/1.11.3/jquery.min.js}"></script>

<script th:inline="javascript">
    const max = [[${pages}]];
    const min = 1;
    const current=[[${current}]];
    const url = [[${url}]];
    $(function () {
        if (current==1){
            $("#upPage").hide()
        }
        if (current==max){
            $("#downPage").hide()
        }

    });
    $("#skipPage").blur(function () {
        let value = $("#skipPage").val();
        if (value < min) {
            $("#skipPage").val(min);
            value = min;
        }
        if (value > max) {
            $("#skipPage").val(max);
            value = max;
        }
        $("#skipbut").attr("href", url + '?current=' + value + '&size=5')
    });

Service

@Override
public Map<String,Object> test(long current, long size, HttpServletRequest request) {
    IPage<Signup> page = new Page<>(current, size);
    QueryWrapper<Signup> queryWrapper = new QueryWrapper<>();
    queryWrapper.isNotNull("job_number");
    IPage<Signup> signupIPage = baseMapper.selectPage(page, queryWrapper);
    //獲得的記錄
    List<Signup> signups = signupIPage.getRecords();
    //總記錄數
    long total = signupIPage.getTotal();
    //總頁數
    long pages = signupIPage.getPages();
    String url = request.getRequestURI();
    Map<String,Object> map=new HashMap<>();
    map.put("current",current);
    map.put("size",size);
    map.put("total",total);
    map.put("pages",pages);
    map.put("signups",signups);
    map.put("url",url);
    System.out.println(url);
    return map;
}

controller

@GetMapping("/test")
public String test(long current, long size, HttpServletRequest request, ModelMap modelMap){
    Map<String, Object> test = signUpService.test(current, size, request);
    modelMap.addAllAttributes(test);
    return "test";
}

效果圖