[Java知识库]【SpringBoot】SpringBoot+Thymeleaf+Pagehelper实现分页功能

引入Pagehelper依赖

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.12</version>
        </dependency>

修改部分代码

Dao层

Dao不要修改，保持原样即可

@Mapper
public interface CourseMapper {
    @Select("select * from course")
    List<course> getAllCourse();
}

Service层

在这阶段要加上分页操作

@Service
public class CourseService {
    @Autowired
    CourseMapper courseMapper;

    public List<course> getAllCourse(Integer pageNum,Integer pageSize) {
        PageHelper.startPage(pageNum,pageSize);
        return courseMapper.getAllCourse();
    }
}

Controller

在这里传值的时候记得要传递page和size俩个参数,然后将拆卸难道数据传递到pageinfo中，将pageinfo传出

    @GetMapping("/stu-all-course")
    public String allCourse(Model model,
                            @RequestParam(name = "page", defaultValue = "1", required = false) int page,
                            @RequestParam(name = "size", defaultValue = "4", required = false) int size) {
        List<course> courseList = courseService.getAllCourse(page, size);
        PageInfo pageInfo = new PageInfo(courseList);
        model.addAttribute("pageInfo", pageInfo);
        return "student/stu-all-course";
    }

前端显示

将数据循环输出

使用th:each来循环输出

<table >
  <thead>
	<tr>
		<th>课程名</th>
		<th>授课老师</th>
		<th>开展院系</th>
		<th>开展班级</th>
		<th>最大人数</th>
	</tr>
  </thead>
  <tbody>   
	<tr th:each="cor:${pageInfo.list}">
		<td th:text="${cor.name}"></td>
		<td th:text="${cor.teacherName}"></td>
		<td th:text="${cor.college}"></td>
		<td th:text="${cor.className}"></td>
		<td th:text="${cor.maxchoice}"></td>
	</tr>
  </tbody>
</table>

控制每页显示几行数据

html代码

         <span th:text="'总共'+${pageInfo.pages}+'页,共'+${pageInfo.total}+'条数据。每页'"></span>
         <select id="changePageSize"
                onchange="changePageSize()">
            <option>选择每页条数...</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
         </select> 条

JavaScript代码

<script>
    function changePageSize() {
        //获取下拉框的值
        var pageSize = $("#changePageSize").val();

        //向服务器发送请求，改变没页显示条数
        location.href = "http://localhost:8080/stu/stu-all-course?page=1&size=" + pageSize;
    }

    $("#find").keydown(function (e) {
        if (e.keyCode === 13) {
            $("#sub").click();
        }
    });
    $(document).ready(function () {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });

    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }

    $(document).ready(function () {

        // 激活导航位置
        setSidebarActive("admin-datalist");

        // 列表按钮
        $("#dataList td input[type='checkbox']").iCheck({
            checkboxClass: 'icheckbox_square-blue',
            increaseArea: '20%'
        });
        // 全选操作
        $("#selall").click(function () {
            var clicks = $(this).is(':checked');
            if (!clicks) {
                $("#dataList td input[type='checkbox']").iCheck("uncheck");
            } else {
                $("#dataList td input[type='checkbox']").iCheck("check");
            }
            $(this).data("clicks", !clicks);
        });
    });
</script>

控制翻页

th:block和th:each的区别就是它本身不显示
pa:${#numbers.sequence(1,pageInfo.pages)}这一句是从开始到pageInfo.pages结束

        <div class="ul_style">
            <ul>
                <li>
                    <a th:href="@{/stu/stu-all-course(page=1,size=${pageInfo.pageSize})}"
                        aria-label="Previous">首页</a></li>
                <li>
                    <a th:href="@{/stu/stu-all-course(page=${pageInfo.pageNum}-1,size=${pageInfo.pageSize})}">上一页</a>
                </li>
			<th:block th:each="pa:${#numbers.sequence(1,pageInfo.pages)}">
                <li>
                    <a th:href="@{/stu/stu-all-course(page=${pa},size=${pageInfo.pageSize})}">[[${pa}]]</a>
                </li>
            </th:block>
                <li>
                    <a th:href="@{/stu/stu-all-course(page=${pageInfo.pageNum}+1,size=${pageInfo.pageSize})}">下一页</a>
                </li>
                <li>
                     <a th:href="@{/stu/stu-all-course(page=${pageInfo.pages},size=${pageInfo.pageSize})}"
                        aria-label="Next">尾页</a></li>
             </ul>
        </div>