Thymeleaf and spring - pagination for table?

Question

I am developing one spring-boot application. I have to print Hashmap resultset as a table. For that I have created table using thymeleaf. The table has sometimes over 100k records. I want pagination for this table every 10 or 50 records.

My html using thymeleaf code snippet:

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

Recently it is printing all the records on one single page. I am checking for 120 records. How I can split the records 10 or 50 on each page. I am using Thymeleaf.

I have tried to use dandelion datatables, I have added dependencies in pom.xml, create dandelinConfig class etc but still it is not reflecting in result.

mrtasln · Answer 1 · 2017-08-18T09:05:27.270

You can do it with using Dandelion Datatables.

Sample usage like this :

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

And Configuration class is :

@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/*");
    }


}

The you should add dandelion folder under resources folder : /resources/dandelion/. And then create /resources/dandelion/sample.json file like below :

{
  "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"
      }
    },

    }
  ]
}

and create /resources/dandelion/dandelion.properties file :

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

add aplication properties file components.standalone = ddl-dt

.Finally example html file :

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

.Finally if you want to add pagination your project you will do it ajax request.Detail is Dandelion Datatables Ajax

it will be work but you should add dandelion dataTables config in your project. — mrtasln, Aug 17 '17 at 06:56
I have added: com.github.dandelion datatables-thymeleaf 1.0.1 in pom.xml. — Ruchita, Aug 17 '17 at 07:06
I have made all the changes according to you have specified.. but the result is still not showing.. I have not added custom-datatables.js. — Ruchita, Aug 18 '17 at 05:54
Error is not there but the all the records are displaying on same page. — Ruchita, Aug 18 '17 at 08:55
[All example here](https://github.com/dandelion/dandelion-datatables-samples/tree/master/datatables-thymeleaf-starter) — mrtasln, Aug 18 '17 at 09:07

score 0 · Answer 2 · edited Apr 12 '18 at 07:27

im using springboot, java, thymeleaf, foundation(js) and mysql, idontknow about dandelion, but with spring Pageable i can do this

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

and with thyeleaf and foundation do this:

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

is only the block o number of pages

Thymeleaf and spring - pagination for table?

2 Answers2