SSM整合-分页(themyleaf)

SSM整合-分页

**

前端代码

           <ul class="pagination justify-content-center">
                    <li class="page-item" th:class="|page-item ${page.pageCru==1? 'disabled':''}|">
                        <a class="page-link" th:href="@{|/passage/${type}/1/${keyword == null ? '':'/'+ keyword}|}" >首页</a>
                    </li>
                    <li th:class="|page-item ${page.pageCru==1?'disabled':''}|">
                        <a class="page-link" th:href="@{|/passage/${type}/${page.pageCru - 1}${keyword == null ? '':'/'+ keyword}|}">上一页</a>
                    </li>
                    <!--numbers.sequence 生成一个 page.from 到 page.to 的连续整数数组-->
                    <li th:each=" i : ${#numbers.sequence(1,page.pageCount)}" >
                        <a class="page-link" th:href="@{|/passage/${type}/${i}${keyword == null ? '':'/'+ keyword}|}" th:text="${i}"></a>
<!--                        th:href="@{|/passage/list?cur=${i}|}" th:text="${i}"-->
                    </li>
                    <li th:class="|page-item ${page.pageCru==page.pageCount ? 'disabled':''}|">
                        <a class="page-link" th:href="@{|/passage/${type}/${page.pageCru + 1}${keyword == null ? '':'/'+ keyword}|}">下一页</a>
                    </li>
                    <li class="page-item" th:class="|page-item ${page.pageCru==page.pageCount ? 'disabled':''}|">
<!--                        ${kword == null ? '/'+${kword}:''}   -->
                        <a class="page-link"  th:href="@{|/passage/${type}/${page.pageCount}${keyword == null ? '':'/'+ keyword}|}">末页</a>
                    </li>
<!--                                          /模块名/类型/当前页,是否有关键字 ?     -->
                </ul>

Controller

 @GetMapping("/{type}/{cur}")
    public String list(ModelMap map, @PathVariable String type,@PathVariable Integer cur){
        System.out.println("type:"+type);
        System.out.println("cur:"+cur);
//       创建一个分页对象
        Page page = new Page();
        page.setPageCru(cur);
//        根据类型查询分页内容
        Page newPage  = passageService.listPage(page,type);
//        将数据放入map中
        map.put("page",newPage);
        map.put("type",type);
//
        return "user/index";
    }

    @GetMapping("/{type}/keyword/{cur}")
    public String listForSearchForm(ModelMap map,
                                @PathVariable String type,
                                @PathVariable Integer cur,
                                @RequestParam String kword){
//        创建一分页对象
        Page page = new Page();
//        设置当前页码
        page.setPageCru(cur);
//        查询当前页数据
        Page newPage = passageService.listSearchPage(page,kword);

        System.out.println("内容条数:"+newPage.getPassages().size());
//        将数据放入map中
        map.put("page",newPage);
        map.put("type",type);
        map.put("keyword",kword);
        return "user/index";
    }

分页对象

@Data
public class Page {

    //总记录数
    private Integer pageTotal;

    //一页的大小
    private Integer pageSize = 5;

    //一共多少页
    private Integer pageCount;

    //当前页码
    private Integer pageCru ;

    //当前页的数据
    private List<IndexUserVo> passages;

}

Service

    @Override
    public Page listPage(Page page, String type){
        //一共多少条记录
        Integer pageTotal = passageMapper.selectTotal();
        //一页的内容条数
        Integer pageSize = page.getPageSize();
        Integer count = 0;
        if (pageTotal % pageSize == 0){
            count = pageTotal / pageSize;
        }else if (pageTotal % pageSize != 0){
            count = pageTotal / pageSize + 1;
        }

        Integer index = 0;
        Integer pageCru = page.getPageCru();
        if (pageCru==1){
            index = 0;
        }else if (pageCru>1){
            index = (pageCru-1)*pageSize;
        }
        List<IndexUserVo> listPage = null;
        if ("list".equals(type)){
           listPage = passageMapper.selectPageList(page.getPageSize(),index);
        }else if (("newest".equals(type))){
            listPage = passageMapper.selectNewPageList(page.getPageSize(),index);
        }else if ("hottest".equals(type)){
            listPage = passageMapper.selectHotPageList(page.getPageSize(),index);
        }
        //一共多少页
        page.setPageCount(count);
//        一共多少条记录
        page.setPageTotal(pageTotal);
//        当前页数据
        page.setPassages(listPage);
        //
        return page;
    }

    @Override
    public Page listSearchPage(Page page, String keyword) {
        //一共有多少条记录
        Integer pageTotal = passageMapper.selectSearchTotal(keyword);
        //一共有多少页
        Integer count = 0;
        Integer pageSize = page.getPageSize();
        if (pageTotal % pageSize == 0){
            count = pageTotal / pageSize;
        }else if (pageTotal % pageSize != 0){
            count = pageTotal / pageSize + 1;
        }
        //计算起始索引
        Integer index = 0;
        Integer pageCru = page.getPageCru();
        if (pageCru==1){
            index = 0;
        }else if (pageCru>1){
            index = (pageCru-1)*pageSize;
        }
        //查找数据
        List<IndexUserVo> indexUserVos = passageMapper.selectSearchList(pageSize, index, keyword);
        //封装成Page对象
        page.setPassages(indexUserVos);
        page.setPageCount(count);
        page.setPageTotal(pageTotal);
        return page;
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,这是一个基于SSM框架和layui前端框架实现分页实例: 首先,在Maven中引入相关依赖: ```xml <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.2.5.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.2.5.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>5.2.5.RELEASE</version> </dependency> <!-- MyBatis --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.4</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.4</version> </dependency> <!-- C3P0 --> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.5.5</version> </dependency> <!-- layui --> <dependency> <groupId>com.layui</groupId> <artifactId>layui</artifactId> <version>2.5.6</version> </dependency> ``` 接着,创建一个实体类`User`,对应数据库中的`user`表: ```java public class User { private Integer id; private String name; private Integer age; //省略getter/setter方法 } ``` 然后,创建DAO层接口`UserMapper`,以及对应的XML文件`UserMapper.xml`,实现分页查询: ```java public interface UserMapper { List<User> getUserList(@Param("start") Integer start, @Param("pageSize") Integer pageSize); Integer getUserCount(); } ``` ```xml <select id="getUserList" resultType="User"> select * from user limit #{start},#{pageSize} </select> <select id="getUserCount" resultType="Integer"> select count(*) from user </select> ``` 再创建Service层接口`UserService`及其实现类`UserServiceImpl`,调用DAO层方法实现业务逻辑: ```java public interface UserService { PageInfo<User> getUserList(Integer pageNum, Integer pageSize); } @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public PageInfo<User> getUserList(Integer pageNum, Integer pageSize) { PageHelper.startPage(pageNum, pageSize); List<User> userList = userMapper.getUserList((pageNum - 1) * pageSize, pageSize); PageInfo<User> pageInfo = new PageInfo<>(userList); int totalCount = userMapper.getUserCount(); pageInfo.setTotal(totalCount); return pageInfo; } } ``` 最后,创建Controller类`UserController`,处理前端请求并返回分页数据: ```java @Controller public class UserController { @Autowired private UserService userService; @RequestMapping("/user/list") @ResponseBody public TableResult<User> getUserList(@RequestParam(value = "page", defaultValue = "1") Integer pageNum, @RequestParam(value = "limit", defaultValue = "10") Integer pageSize) { PageInfo<User> pageInfo = userService.getUserList(pageNum, pageSize); TableResult<User> result = new TableResult<>(); result.setCode(0); result.setMsg(""); result.setCount(pageInfo.getTotal()); result.setData(pageInfo.getList()); return result; } } ``` 其中,`TableResult`是一个通用的分页返回结果类: ```java public class TableResult<T> { private Integer code; private String msg; private Long count; private List<T> data; //省略getter/setter方法 } ``` 最后,在前端页面中引入layui的分页组件: ```html <table id="userTable" lay-filter="userTable"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use(['table', 'layer'], function () { var table = layui.table; var layer = layui.layer; table.render({ elem: '#userTable', url: '/user/list', method: 'get', page: true, cols: [[ {field: 'id', title: 'ID', width: 70}, {field: 'name', title: '姓名', width: 120}, {field: 'age', title: '年龄', width: 70}, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} ]] }); }); </script> ``` 这样,一个基于SSM和layui的分页实例就完成了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值