Thymeleaf 和 spring - 表格的分页？答案

【问题标题】：Thymeleaf and spring - pagination for table?Thymeleaf 和 spring - 表格的分页？
【发布时间】：2017-08-16 12:22:25
【问题描述】：

我正在开发一个 spring-boot 应用程序。我必须将 Hashmap 结果集打印为表格。为此，我使用 thymeleaf 创建了表格。该表有时有超过 10 万条记录。我希望每 10 或 50 条记录对该表进行分页。

我的 html 使用 thymeleaf 代码 sn-p:

<!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org" 
  xmlns:dt="http://www.thymeleaf.org/dandelion/datatables">
<head lang="en">
 .
 .
<div id="myDivTable">
<table class="table table-bordered" id="bomTable" id="bomTable" 
 dt:table="true"  dt:displaylength="10">
    <span th:each="row, iter : ${result}" pages:paginate="5">
        <tr th:classappend="${iter.first} ? header-style">
            <span th:each="cell : ${row.value}">
            <td th:classappend="${#strings.contains(cell,'difference')}?set-difference-bg-color" >
            <div th:switch="${cell}">
                <div th:case="'Only in WC'" >
                    <span class="set-green-text-bold" th:text="${cell}">
                    </span>
                </div>
                <div th:case="'New in XLSX'" >
                    <span class="set-red-text-bold" th:text="${cell}">
                    </span>
                </div>
                <div th:case="'No'" >
                    <span class="set-red-text-bold" th:text="${cell}">
                    </span>
                </div>
                <div th:case="'Yes'" >
                    <span class="set-green-text-bold" th:text="${cell}">
                    </span>
                </div>
                <div th:case="*" >
                    <div th:if="${#strings.contains(cell,'difference')}">
                        <span 
th:text="${#strings.substring(cell,0,#strings.indexOf(cell,'difference'))}"> 
                       </span>                  
                    </div>
                    <div th:unless="${#strings.contains(cell,'difference')}">
                        <span th:text="${cell}"></span>
                    </div>
                </div>
            </div>
            </td>
            </span>
        </tr>
    </span>
</table>
</div>
 .
 .

最近它在一个页面上打印所有记录。我正在检查 120 条记录。如何在每页上拆分 10 或 50 条记录。我正在使用 Thymeleaf。

我尝试使用蒲公英数据表，我在 pom.xml 中添加了依赖项，创建了 dandelinConfig 类等，但它仍然没有反映在结果中。

【问题讨论】：

标签： spring-boot pagination thymeleaf dandelion

【解决方案1】：

您可以使用Dandelion Datatables 来完成。

这样的用法示例：

           <dependency>
                <groupId>com.github.dandelion</groupId>
                <artifactId>datatables-thymeleaf</artifactId>
                <version>1.1.0</version>
            </dependency>
            <dependency>
                <groupId>com.github.dandelion</groupId>
                <artifactId>datatables-spring3</artifactId>
                <version>1.1.0</version>
            </dependency>
            <dependency>
                <groupId>com.github.dandelion</groupId>
                <artifactId>dandelion-thymeleaf</artifactId>
                <version>1.1.1</version>
            </dependency>

配置类是：

@Configuration
public class DandelionConfig {


    @Bean
    public DandelionDialect dandelionDialect() {
        return new DandelionDialect();
    }

    @Bean
    public DataTablesDialect dataTablesDialect(){
        return new DataTablesDialect();
    }

    @Bean
    public Filter dandelionFilter() {

        return new DandelionFilter();
    }

    @Bean
    public ServletRegistrationBean dandelionServletRegistrationBean() {

        return new ServletRegistrationBean(new DandelionServlet(), "/dandelion-assets/*");
    }


}

您应该在资源文件夹下添加蒲公英文件夹：/resources/dandelion/。然后创建 /resources/dandelion/sample.json 文件，如下所示：

{
  "bundle" : "custom",
  "assets": [
    {
      "name": "bootstrap4-datatables-css",
      "type": "css",
      "locations": {
        "classpath": "static/css/dataTables.bootstrap4.min.css"
      }
    },
    {
      "name": "jquery-datatables-js",
      "type": "js",
      "locations": {
        "classpath": "static/js/jquery.dataTables.min.js"
      }
    },
    {
      "name": "bootstrap4-datatables-js",
      "type": "js",
      "locations": {
        "classpath": "static/js/dataTables.bootstrap4.min.js"
      }
    },

    }
  ]
}

并创建 /resources/dandelion/dandelion.properties 文件：

components.standalone=ddl-dt
bundle.includes=custom

添加应用属性文件components.standalone = ddl-dt

.最后是示例 html 文件：

<html  xmlns:th="http://www.thymeleaf.org"
    xmlns:dt="http://www.thymeleaf.org/dandelion/datatables"
    >
 <table id="paging-simple" dt:table="true" dt:pagingType="simple" class="display">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Firstname</th>
                 <th>Lastname</th>
                 <th>City</th>
                 <th>Mail</th>
              </tr>
           </thead>
           <tbody>
              <tr th:each="person : ${persons}">
                 <td th:text="${person?.id}">1</td>
                 <td th:text="${person?.firstName}">John</td>
                 <td th:text="${person?.lastName}">Doe</td>
                 <td th:text="${person?.address?.town?.name}">Nobody knows!</td>
                 <td th:text="${person?.mail}">john@doe.com</td>
              </tr>
           </tbody>
        </table>

.最后，如果你想为你的项目添加分页，你会做 ajax request.Detail 是Dandelion Datatables Ajax

【讨论】：

它会工作，但你应该在你的项目中添加蒲公英数据表配置。
我添加了：com.github.dandeliondatatables-thymeleaf1.0.1 在 pom.xml 中。
我做了一个详细的例子
我已经按照你指定的方式进行了所有的更改..但是结果仍然没有显示..我没有添加custom-datatables.js。
从 json 中删除 custom-datatables.js 块，然后重试。

【解决方案2】：

我使用 springboot、java、thymeleaf、foundation(js) 和 mysql，我不知道蒲公英，但是使用 spring Pageable 我可以做到这一点

public String listadoProductos(Pageable pageable, Model model) {
if(pageable.getPageSize() > PAGE_SIZE_INITIAL) {
  pageable = new PageRequest(0,PAGE_SIZE_INITIAL);
}
Page<Productos> productos = productosRepository.findByEnabled(true, pageable);//trae todos los productos habilitados
model.addAttribute("productos", productos);
modelPaginacion(model, productos, pageable.getPageNumber());

return tiendaFolder+"listaProductos";}

并与 thyeleaf 和基金会一起这样做：

<div class="row">
    <ul class="paginacion text-center">
        <li class="previous"  th:if="${previo}">
            <a th:href="@{/tienda/productos/admin?page={pa}&size={ps}(pa=${paginaActual-1},ps=${size})}"></a>
        </li>
        <li class="previa" th:if="${previo}">
            <a th:href="@{/tienda/productos/admin?page={pa}&size={ps}(pa=${paginaActual-1},ps=${size})}" th:text="${paginaActual-1}"></a>
        </li>
        <li class="actual" th:text="${paginaActual}">
        </li>
        <li class="siguiente" th:if="${siguiente}">
            <a th:href="@{/tienda/productos/admin?page={pa}&size={ps}(pa=${paginaActual+1},ps=${size})}" th:text="${paginaActual+1}"></a>
        </li>
        <li class="next" th:if="${siguiente}">
            <a th:href="@{/tienda/productos/admin?page={pa}&size={ps}(pa=${paginaActual+1},ps=${size})}"></a>
        </li>
    </ul>
</div>

只是块的页数

【讨论】：