Thymeleaf和春天 - 桌子的分页?

时间:2017-08-16 12:22:26

标签: spring-boot pagination thymeleaf dandelion

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

我的html使用百万美分代码片段:

while($row = mysqli_fetch_array($query))

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

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

2 个答案:

答案 0 :(得分:0)

您可以使用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

答案 1 :(得分:0)

即时通讯使用springboot,java,thymeleaf,foundation(js)和mysql,idontknow关于蒲公英,但有春季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>

只是块数