尚好房

6、分页处理

6.1、分页之dao层

1、添加xml方法

<sql id="findPageWhere">
        <where>                     
           <if test="roleName != null and roleName != ''">
                and role_name = #{roleName}
            </if>
            and is_deleted = 0
        </where>
    </sql>
    
    <select id="findPage" resultType="Role">
        <include refid="columns" />
        from acl_role 
        <include refid="findPageWhere"/>
        order by id desc
    </select>

2、RoleDao添加接口

Page<Role> findPage(Map<String, Object> filters);

说明：filters封装页面搜索条件，如：roleName

3、MyBatis中添加分页支持

在mybatis-config.xml添加分页支持

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <plugins>
        <!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
        <plugin interceptor="com.github.pagehelper.PageHelper">
            <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
            <property name="dialect" value="mysql"/>
        </plugin>
    </plugins>
</configuration>

6.2、分页之service层

1、RoleService添加接口

PageInfo<Role> findPage(Map<String, Object> filters);

2、RoleServiceImpl添加接口实现

public PageInfo<Role> findPage(Map<String, Object> filters) {
        //当前页数
        int pageNum = CastUtil.castInt(filters.get("pageNum"), 1);
        //每页显示的记录条数
        int pageSize = CastUtil.castInt(filters.get("pageSize"), 10);
​
        PageHelper.startPage(pageNum, pageSize);
        return new PageInfo<Role>(roleDao.findPage(filters), 10);
    }

common-util引入工具类：CastUtil（资源文件获取）

6.3、分页之controller层

RoleController添加方法

注释掉之前的列表方法

@RequestMapping
public String index(ModelMap model, HttpServletRequest request) {
   Map<String,Object> filters = getFilters(request);
   PageInfo<Role> page = roleService.findPage(filters);
​
   model.addAttribute("page", page);
   model.addAttribute("filters", filters);
   return PAGE_INDEX;
}
​
/**
 * 封装页面提交的分页参数及搜索条件
 * @param request
 * @return
 */
private Map<String, Object> getFilters(HttpServletRequest request) {
   Enumeration<String> paramNames = request.getParameterNames();
   Map<String, Object> filters = new TreeMap();
   while(paramNames != null && paramNames.hasMoreElements()) {
      String paramName = (String)paramNames.nextElement();
      String[] values = request.getParameterValues(paramName);
      if (values != null && values.length != 0) {
         if (values.length > 1) {
            filters.put(paramName, values);
         } else {
            filters.put(paramName, values[0]);
         }
      }
   }
   if(!filters.containsKey("pageNum")) {
      filters.put("pageNum", 1);
   }
   if(!filters.containsKey("pageSize")) {
      filters.put("pageSize", 10);
   }
​
   return filters;
}

6.4、列表页面

1、获取分页条

模板页面：hplus-master/table_data_tables.html

从模板页面复制分页导航条

代码如下：

<div class="row">
    <div class="col-sm-6">
        <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">显示
            1 到 10 项，共 57 项
        </div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
            <ul class="pagination">
                <li class="paginate_button previous disabled" aria-controls="DataTables_Table_0" tabindex="0"
                    id="DataTables_Table_0_previous"><a href="#">上一页</a></li>
                <li class="paginate_button active" aria-controls="DataTables_Table_0" tabindex="0"><a href="#">1</a>
                </li>
                <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0"><a href="#">2</a></li>
                <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0"><a href="#">3</a></li>
                <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0"><a href="#">4</a></li>
                <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0"><a href="#">5</a></li>
                <li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0"><a href="#">6</a></li>
                <li class="paginate_button next" aria-controls="DataTables_Table_0" tabindex="0"
                    id="DataTables_Table_0_next"><a href="#">下一页</a></li>
            </ul>
        </div>
    </div>
</div>

说明：放入页面查看是否显示正常

2、完整页面

搜索与分页

搜索与分页都通过提交from表单的形式提交数据，后台controller获取参数放入Map对象作为参数

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
​
    <link rel="shortcut icon" th:href="@{/static/favicon.ico}">
    <link th:href="@{/static/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet">
    <link th:href="@{/static/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
​
    <!-- Data Tables -->
    <link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
​
    <link th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link th:href="@{/static/css/style.css?v=4.1.0}" rel="stylesheet">
​
    <!-- 全局js -->
    <script th:src="@{/static/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/static/js/bootstrap.min.js?v=3.3.7}"></script>
    <script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}"></script>
    <!-- Data Tables -->
    <script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}"></script>
    <script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
​
    <!-- 弹出层js -->
    <script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
    <script th:src="@{/static/js/myLayer.js}"></script>
</head>
<body class="gray-bg">
<form id="ec" th:action="@{/role}" method="post">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table form-table margin-bottom10">
                            <tr>
                                <td>
                                    <input type="text" name="roleName" th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
                                </td>
                            </tr>
                        </table>
                        <div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                            <button type="button" class="btn btn-sm btn-primary create">新增</button>
                            <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>角色名称</th>
                                <th>角色编码</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作 </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX" th:each="item,it : ${page.list}">
                                <td class="text-center" th:text="${it.count}">11</td>
                                <td th:text="${item.roleName}">22</td>
                                <td th:text="${item.roleCode}">33</td>
                                <td th:text="${item.description}">33</td>
                                <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
                                <td class="text-center">
                                    <a class="edit" th:attr="data-id=${item.id}">修改</a>
                                    <a class="delete" th:attr="data-id=${item.id}">删除</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
​
                        <div class="row">
                        <input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}"/>
    <input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}"/>
                            <div class="col-sm-6">
                                <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
                                    当前第<span th:text="${page.pageNum }"></span>页/共<span th:text="${page.pages }"></span>页&nbsp;&nbsp;共<span
                                        id="pageTotal" th:text="${page.total }"></span>条记录&nbsp;&nbsp;
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                                    <ul class="pagination">
                                        <li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
                                                href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">第一页</a></li>
                                        <li class="paginate_button previous" th:if="${page.isFirstPage}"><a href="javascript:">第一页</a></li>
                                        <li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
                                                th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页</a>
                                        </li>
                                        <li class="paginate_button previous disabled" th:if="${page.isFirstPage}"><a
                                                href="javascript:">上一页</a></li>
                                        <li th:each="i : ${page.navigatepageNums}"
                                            th:class="${i == page.pageNum } ? 'paginate_button active' : 'paginate_button'">
                                            <a th:href="'javascript:document.forms.ec.pageNum.value='+${i}+';document.forms.ec.submit();'"><span
                                                    th:text="${i}"></span></a>
                                        </li>
                                        <li class="paginate_button next" th:if="${!page.isLastPage}"><a
                                                th:href="'javascript:document.forms.ec.pageNum.value='+${page.nextPage}+';document.forms.ec.submit();'">下一页</a>
                                        </li>
                                        <li class="paginate_button next disabled" th:if="${page.isLastPage}"><a href="javascript:">下一页</a>
                                        </li>
                                        <li class="paginate_button next" th:if="${!page.isLastPage}"><a
                                                th:href="'javascript:document.forms.ec.pageNum.value='+${page.pages}+';document.forms.ec.submit();'">尾页</a>
                                        </li>
                                        <li class="paginate_button next" th:if="${page.isLastPage}"><a href="javascript:">尾页</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script th:inline="javascript">
    $(function(){
        $(".create").on("click",function () {
            opt.openWin("/role/create","新增",580,430);
        });
        $(".edit").on("click",function () {
            var id = $(this).attr("data-id");
            opt.openWin('/role/edit/' + id,'修改',580,430);
        });
        $(".delete").on("click",function(){
            var id = $(this).attr("data-id");
            opt.confirm('/role/delete/'+id);
        });
    });
</script>
</body>
</html>