All geek questions in one place

Spring Boot Dandelion Datatables Search thimeleaf between dates

I am Dandelion data with Spring Boot and thymeleaf.

This is my code for the table in which I want to show all the logs.

<table class="table table-bordered" id="expiredUsersTable" dt:table="true"> <thead> <tr> <th dt:sortInitDirection="desc">TIME</th> <th dt:filterable="true" dt:filterType="select">Log Level</th> <th>Message</th> </tr> </thead> <tbody> <tr th:each="log : ${logs}"> <td th:text="${log?.getFormattedDate()}"></td> <td th:text="${log?.level}"></td> <td th:text="${log?.message}"></td> </tr> </tbody> </table>

I want to add a filter between date ranges for this table, but I could not achieve this with dandelion datatables. What are the ways to do this?

+5
source share
2 answers

In thimeleaf, it looks something like this:

Controller:

 // Create these dates however you want, these example dates are filtering between 1950 and 1960. GregorianCalendar gc = new GregorianCalendar(); gc.set(Calendar.YEAR, 1950); model.put("start", gc.getTime()); gc.set(Calendar.YEAR, 1960); model.put("end", gc.getTime());

Thymeleaf:

 <table class="table table-bordered" id="expiredUsersTable" dt:table="true"> <thead> <tr> <th dt:sortInitDirection="desc">TIME</th> <th dt:filterable="true" dt:filterType="select">Log Level</th> <th>Message</th> </tr> </thead> <tbody> <tr th:each="log : ${logs}" th:unless="${log.date.before(start) OR log.date.after(end)}"> <td th:text="${log?.formattedDate}"></td> <td th:text="${log?.level}"></td> <td th:text="${log?.message}"></td> </tr> </tbody> </table>
0
source

There are examples of range filtering on the datatable site: https://datatables.net/examples/plug-ins/range_filtering.html

I have to guess the format of the dates you are using (dd-mm-yyyy is used in this example), something like this worked for me:

Html:

 <body onload="initFilter();"> From <input type="text" id="start" /> to <input type="text" id="end" />

JavaScript:

 <script> // <![CDATA[ function parseDate(date) { if (date.length < 10) return false; var parts = date.split("-"); var d = parseInt(parts[0]); var m = parseInt(parts[1]) - 1; var y = parseInt(parts[2]); return new Date(y, m, d); } function initFilter() { $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { var start = parseDate($('#start').val()); var end = parseDate($('#end').val()); var data = parseDate(data[0]); var valid = true; valid = valid && (!start || (start.getTime() =< data.getTime())); valid = valid && (!end || (end.getTime() > data.getTime())); return valid; } ); $('#start, #end').keyup( function() { oTable_expiredUsersTable.draw(); }); } // ]]> </script>
0
source

Source: https://habr.com/ru/post/1263441/

More articles:


All Articles