bootstrap实现分页

浅浅的花香味﹌ 2022-05-16 10:58 309阅读 0赞

1.官网下载bootstrap,bootstrap-table

[https://v3.bootcss.com/][https_v3.bootcss.com]

[http://bootstrap-table.wenzhixin.net.cn/][http_bootstrap-table.wenzhixin.net.cn]

2.引入css和js

此处引用的是themeleaf写法
    	<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
        <link th:href="@{/bootstrap/css/bootstrap-table.css}" rel="stylesheet">
        <script th:src="@{/jquery/jquery-1.11.1.min.js}" ></script>
        <script th:src="@{/bootstrap/js/bootstrap.js}" ></script>
        <script th:src="@{/bootstrap/js/bootstrap-table.js}" ></script>

3.html代码

<div id="content">
           <table id="table"></table>
           <div id="toolbar" class="btn-group">
               <button id="btn_add" type="button" class="btn btn-danger" data-toggle="modal" data-target="#addModal">
                   <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>修改用户信息
               </button>
               <button id="btn_delete" type="button" class="btn btn-info">
                   <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除用户信息
               </button>
           </div>
           </table>
    </div>

4.script

5.controller部分代码

@RequestMapping("/queryAll")
        @ResponseBody
        public String queryAll(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
                               HttpServletResponse response) throws  Exception{
            //搜索框功能
            if (null != searchText) {
                searchText = "'%"+searchText+"%'";//sqlserver模糊查询
            }else{
                searchText = "'%"+""+"%'";//sqlserver模糊查询
            }
            //在service通过条件查询获取指定页的数据的list
            List<User> list = userService.queryAll(pageSize, pageNumber, searchText);
            System.out.println(list.size());
            //根据查询条件，获取符合查询条件的数据总量
            Integer total = userService.pageCount(searchText);
            //System.out.println(total);
            //自己封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点(sidePagination: "server"服务端分页)
            Map<String, Object> maps = new HashMap<>();
            maps.put("rows",list);
            maps.put("total",total);
            //System.out.println(maps.size());
            return mapToJson(maps);

6.mapper

//sqlserver分页查询注解方式,由于采用#{}取值方式,默认为变量添加单引号导致语句保错,此处采用${}取值方式
     @Select("select top ${pageSize} * from user_info where userid not in (select top ${pageNumber} userid from user_info) " +
                "and (username like ${searchText} or login like ${searchText} )")
        public List<User> queryAll(@Param("pageSize") Integer pageSize,@Param("pageNumber") Integer pageNumber,@Param("searchText") String searchText);
    
        @Select("select count(1) from user_info where username like ${searchText} or login like ${searchText}")
        @ResultType(Integer.class)
        public Integer queryCount(@Param("searchText") String searchText);

7.效果图

![70][]

[https_v3.bootcss.com]: https://v3.bootcss.com/
[http_bootstrap-table.wenzhixin.net.cn]: http://bootstrap-table.wenzhixin.net.cn/
[70]: /images/20220516/a7fe98bdd74f4d29bc3f2228cb8a9c3b.png