SSM--之用Bootstrap插件实现分页

1,首先需要在SqlMapconfig.xml配置文件中配置


    <plugins>
        <!-- com.github.pagehelper为PageHelper类所在包名 -->
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 使用下面的方式配置参数,后面会有所有的参数介绍 -->
            <!-- 分页合理化参数,默认值为false。当该参数设置为 true 时,pageNum<=0 时会查询第一页,
             pageNum>pages(超过总数时),会查询最后一页。默认false 时,直接根据参数进行查询 -->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

需要的jar包
pagehelper-5.0.0.jar
jsqlparser-0.9.5.jar

2,后台

    @RequestMapping("select.do")
    public String sss(@RequestParam(value="pageno",defaultValue="1")Integer pageno,
            @RequestParam(value="pagesize",defaultValue="3")Integer pagesize,Model model){
        PageHelper.startPage(pageno, pagesize);
        List<Address> list = userMapper.selectAddress();
        System.out.println(list.size());
        PageInfo<Address> pageinfo = new PageInfo<>(list);
        model.addAttribute("adds", pageinfo);
        return "reg";
    }

前台

<div class="container">
    <table class="table table-hover">
        <tr>
            <td>编号</td><td>地址<td>
        </tr>
        <c:forEach items="${adds.list }" var="a">
        <tr>
            <td>${a.aid }</td><td>${a.aname }<td>
        </tr>
        </c:forEach>    
    </table>
     <!-- 分页条 -->
        <div class="row">
            <div class="col-md-6">共有${adds.total}条数据,共有${adds.pages}页</div>

            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li ng-show="adds.hasPreviousPage"><a href="select.do?pageno=1">首页</a></li>
                <li>
                  <a ng-show="adds.hasPreviousPage" href="/select.do?pageno=${adds.pageNum-1}"  aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li>
                  <a ng-hide="pageInfo.hasPreviousPage" href="#"  aria-label="Previous" class="disabled">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li ng-repeat="num in adds.navigatepageNums" ng-class="num==adds.pageNum?'active':''">
                    <a href="#" >${adds.pageNum}</a>
                </li>
                <li>
                  <a href="select.do?pageno=${adds.pageNum+1}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
                <li><a href="#" ng-click="toPage(adds.pages)">尾页</a></li>
              </ul>
            </nav>
        </div>

</div>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个基于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的分页实例就完成了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值