Thymeleaf table row as column header and content

classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

Thymeleaf table row as column header and content

bodong
This post was updated on .
Hi, I am new in . I have question about dynamic table. Here is my case :
[
   {
      "country":"country 1",
      "districs":[
         {
            "district":"district 1",
            "cinemas":[
               {
                  "cinema": "cinema 1"
                  "movie":"Sherlock",
                  "visitor":30
               },{
                  "cinema": "cinema 2"
                  "movie":"Terminator",
                  "visitor":40
               },{
                  "cinema": "cinema 2"
                  "movie":"Tarzan",
                  "visitor":20
               }]
		 }, {
            "district":"district 2",
            "cinemas":[
               {
                  "cinema": "cinema 1"
                  "movie":"Sherlock",
                  "visitor":12
               },{
                  "cinema": "cinema 2"
                  "movie":"Terminator",
                  "visitor":41
               },{
                  "cinema": "cinema 2"
                  "movie":"Tarzan",
                  "visitor":24
               }]
			}, {
            "district":"district 3",
            "cinemas":[
               {
                  "cinema": "cinema 1"
                  "movie":"Sherlock",
                  "visitor":12
               },{
                  "cinema": "cinema 2"
                  "movie":"Terminator",
                  "visitor":41
               }]
			}]
	},    {
      "country":"country 2",
      "districs":[
         {
            "district":"district 1",
            "cinemas":[
               {
                  "cinema": "cinema 2"
                  "movie":"Terminator",
                  "visitor":40
               },{
                  "cinema": "cinema 2"
                  "movie":"Tarzan",
                  "visitor":20
               }]
		 }, {
            "district":"district 2",
            "cinemas":[
               {
                  "cinema": "cinema 1"
                  "movie":"Sherlock",
                  "visitor":12
               },{
                  "cinema": "cinema 2"
                  "movie":"Tarzan",
                  "visitor":24
               }]
			}, {
            "district":"district 3",
            "cinemas":[
               {
                  "cinema": "cinema 1"
                  "movie":"Sherlock",
                  "visitor":12
               },{
                  "cinema": "cinema 2"
                  "movie":"Terminator",
                  "visitor":41
               }]
			}]
	}]
And then I want to display like this :
---- ----------------------------------------------------------------------------------------------------
Movies     |country 1                                   | country 2                                              |
              ---------------------------------------------------------------------------------------------
              |district 1   | district 2  | district 3   | district 1    | district 2    | district 3           |
---------------------------------------------------------------------------------------------------------
Sherlock  | 30          | 12           | 12           | 0               | 12            | 12                   |  
Terminat  | 40          | 41           | 41           | 40             | 0              | 41                   |
Tarzan     | 20          | 24           | 0             | 20             | 24            | 0                     |
---------------------------------------------------------------------------------------------------------
How I could achieve this in ? My code as below, but still cannot achieve this output.
<table>
    	<thead>
          <tr>                    
              <th:block th:each="data : ${countries}">
                   <th th:colspan="${data.districts.size()}" th:text="${data.country}" ></th>
              </th:block>
          </tr>
          <tr>    
             <th:block th:each="data : ${countries}">
                  <th:block th:each="district :${data.districts}">
                      <th th:text="${district.district}"></th>
                   </th:block>
              </th:block>
          </tr>
	<thead>
        <tbody>
           <tr>
             <th:block th:each="data : ${countries}">
                 <th:block th:each="district :${data.districts}">
                      <th:block th:each="cinema :${district.cinemas}">
                         <td th:text="${cinema.visitor}" />
                      </th:block>
                 </th:block>
              </th:block>
          </tr>
        </tbody>
</table>
Please if anyone has any idea to solve this problem. Thanks a lot. BTW, I don't how to format the post in here, so I did formatted post in this site as well : http://stackoverflow.com/questions/38748909/-dynamic-header-and-content-table-from-database in case someone headache reading my question without format.
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

bodong
Come on guys, I need your help.
No body responds at all
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

danielfernandez
Administrator
You seem to be trying to do some complex pivoting of your data at the view layer. You can do that, of course, but the complexity of your template would end up being significative, be it using Thymeleaf or any other technology.

I would recommend you performing your pivoting at the controller layer, and providing the view layer with the data in a shape that resembles a bit more what you try to display.

Regards,
Daniel.
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

Emanuel
Administrator
In reply to this post by bodong
Like Daniel said, you might want to reorganize the model so that it's closer to the view you're trying to build.

Another idea might be to build 2 separate tables: the most difficult structure is the heading at the top (movies, countries, and districts), so you could create another model that is derived from your first one to build that part in the view, then you can have a fairly simple row structure for the movies and visitor numbers underneath, using CSS to make sure it all lines up.  (This does mean creating 2 new models for each of those parts, but it definitely makes the view code simpler.)
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

bodong
Hi Emanuel,
Hi Daniel,

Thanks for your response.
I thought my model(json) is representing the output?


is like
List<String, List<String, List <String, Object>>> ? 
Please give me clearer suggestions, thanks a lot for your help :)
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

Emanuel
Administrator
I also suggested creating another model that would help build the header at the top since the heading groups look rather complicated - you'd need to use things like rowspan and colspan to make sure the table ends up looking right.  Although, it might be possible to use just the first model entry to build it if every country/district is represented in that model (ie: if values with 0 visitors are included, and if the countries/districts are in the exact same order for every movie mentioned).
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

bodong
Hi Emanuel,

I appreciate your suggestion, but to be frank I don't get your idea at all.

I'm sorry,  could you explain me with the example please..

Thanks,
Bodong
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

bodong
In reply to this post by danielfernandez
Hi Daniel,

Could you explain me with the sample of model according your suggestion?
I can't translate your ideas to the modeling..

Thanks,
Bodong
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

Emanuel
Administrator
In reply to this post by bodong
Something that might be a model for the headers is a list of countries and their districts:

[
  country1: [
    district1,
    district2,
    district3
  ],
  ...
]

And you build the top part using that:

<table>
  <tr>
    <td rowspan="2">Movies</td>
    <td th:each="country: ${countries}" th:text="${country.name}" colspan="numberOfDistrictsInCountry">Country name</td>
  </tr>
  <tr>
    <th:block th:each="country: ${countries}">
      <td th:each="district: ${country.districts}" th:text=${district.name}">District name</td>
    </th:block>
  </tr>

Then using a separate model that is just movies and their respective visitor numbers for each district in the same order that you built them for the header, you can build the rows below it:

  <tr th:each="movie: ${movies}">
    <td th:text="${movie.name}">Movie name</td>
    <th:block th:each="visitors: ${movie.visitors}">
      <td th:text="${visitors}">Visitor count</td>
    </th:block>
  </tr>
</table>

This idea takes your big model with all the data and splits it into some smaller ones at the controller level which you can feed into the view the way you wanted it displayed.
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf table row as column header and content

bodong
Thanks a lot dude, I got it now. I applied it and it works like charm.
My life is no longer miserable

cheers,
bodong