2017-08-16 4 views
0

私は1つのスプリングブートアプリケーションを開発しています。私はテーブルとしてHashmapの結果セットを出力する必要があります。そのために、私はthymeleafを使ってテーブルを作りました。テーブルには時には100,000以上のレコードがあります。私はこのテーブルのページングを10または50レコード毎にしたい。 thymeleafコードスニペットを使用してテーブルのためのタイメレフと春のページネーション?

私のhtml:

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

は最近、それが1つのページ上のすべてのレコードを印刷しています。私は120レコードを確認しています。どのようにして各ページで10または50のレコードを分割できますか。私はThymeleafを使用しています。

私はdandelionデータ型を使用しようとしましたが、pom.xmlに依存関係を追加し、dandelinConfigクラスを作成しましたが、それでも結果に反映されません。

答えて

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


} 

ザ・あなたは、リソースフォルダの下にタンポポのフォルダを追加する必要があります/リソース/タンポポ/。 aplicationプロパティはcomponents.standalone = ddl-dtファイル追加

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

:そして、以下のような/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ファイルを作成します

。最終的にhtmlファイル:

あなたのプロジェクトページネーションを追加したい場合は

.Finallyあなたはrequest.DetailがDandelion Datatables Ajax

+0

動作していません。 – Ruchita

+0

それは動作しますが、プロジェクトにdandelion dataTables configを追加する必要があります。 – mrtasln

+0

私は: \t \t \t com.githubを追加しました。タンポポのpom.xmlで \t \t \t のDataTable-thymeleaf \t \t \t 1.0.1 \t \t。 – Ruchita

0

springboot、ジャワ、thymeleaf、土台(JS)とMySQLを使用してイム、タンポポについてidontknowが、春にあるAJAXそれを行いますページング可能私はこの

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>

がありますブロックのみページ数

関連する問題