pageHelper分页前端实现

该博客介绍了如何结合jquery、bootstrap和thymeleaf在前端实现pageHelper分页功能。详细步骤包括前端框架的选择与配置,以及后端Controller和service的设置。文章最后展示了一段具体的代码实现和最终效果。

前端框架

jquery+bootstrap+thymeleaf

后端Controller

/**
     * 跳转日志管理页面
     *
     * @param model
     * @param pageNum  第几页
     * @param pageSize 页大小
     * @return
     */
    @Log(module = "日志管理", operation = "查看操作日志列表")
    @RequiresPermissions("sys:log:log")
    @RequestMapping("/logList")
    public String logList(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum, @RequestParam(defaultValue = "10", value = "pageSize") Integer pageSize) {

        PageInfo<SysLog> pageInfo = sysLogService.selectByPage(pageNum, pageSize);
        model.addAttribute("pageInfo", pageInfo);

        return prefix + "logList";
    }

后端service

     /**
     * 跳转日志管理页面
     *
     * @param model
     * @param pageNum  第几页
     * @param pageSize 页大小
     * @return
     */
    @Override
    public List<SysLog> 
在使用PageHelper进行分页查询时,前端处理方法有多种,以下是不同技术栈下的示例: ### Vue + Element UI 可以使用Element UI的`<el - pagination>`组件实现前端分页。以下是完整功能分页组件代码示例: ```vue <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" > </el-pagination> </template> <script> export default { data() { return { currentPage4: 1 }; }, methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); // 这里可以添加请求数据的逻辑,根据新的页大小重新请求数据 }, handleCurrentChange(val) { console.log(`当前页: ${val}`); // 这里可以添加请求数据的逻辑,根据新的页码重新请求数据 } } }; </script> ``` 通过监听`size-change`和`current-change`事件,在事件处理函数中可以根据新的页大小和页码重新向服务器请求数据 [^3]。 ### jQuery + Bootstrap + Thymeleaf 在这种技术栈下,后端Controller接收前端传递的页码和页大小参数,进行分页查询后将结果封装到`PageInfo`对象中传递给前端前端会接收`PageInfo`对象并进行渲染。 后端Controller示例: ```java import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; @Controller public class LogController { private static final String prefix = "your_prefix/"; @RequestMapping("/logList") public String logList(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum, @RequestParam(defaultValue = "10", value = "pageSize") Integer pageSize) { // 假设这里调用了service层的分页查询方法 PageInfo<SysLog> pageInfo = sysLogService.selectByPage(pageNum, pageSize); model.addAttribute("pageInfo", pageInfo); return prefix + "logList"; } } ``` 前端可以使用Thymeleaf来渲染分页信息和数据列表,同时结合jQuery和Bootstrap的样式和交互功能。在前端页面中可以使用Thymeleaf的表达式来获取`PageInfo`对象中的信息,如总页数、当前页码等,并根据这些信息动态生成页码导航和数据列表 [^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值