提问者:小点点

表的胸腺和Spring分页?


我正在开发一个Spring启动应用程序。我必须将哈希图结果集打印为表格。为此,我使用百里香叶创建了表格。该表有时包含超过 100k 条记录。我希望每 10 或 50 条记录对这个表进行分页。

我的html使用thymeeaf代码片段:

<!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条记录。我正在使用Thymelaf。

我已经尝试过使用蒲公英数据表,我在pom.xml中添加了依赖项,创建了蒲公英配置类等,但仍然没有在结果中反映出来。


共2个答案

匿名用户

您可以使用蒲公英数据表来做到这一点。

示例用法如下:

           <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文件夹下添加蒲公英文件夹:/resources/蒲公英/。然后创建/resources/蒲公英/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/depdelion/depdelion.properties文件:

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

添加应用程序属性文件< code > 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 请求。细节是蒲公英数据表 阿贾克斯

匿名用户

我使用springboot、java、thymeleaf、Foundation(js)和mysql,我不知道蒲公英,但使用Spring Pagable我可以做到这一点

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";}

用你的叶子和粉底这样做:

<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>

只有区块o页数吗?