我正在开发一个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中添加了依赖项,创建了蒲公英配置类等,但仍然没有在结果中反映出来。
您可以使用蒲公英数据表来做到这一点。
示例用法如下:
<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页数吗?