Iteration: opening/ closing other elements

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

Iteration: opening/ closing other elements

gil_nem
This post was updated on .
Hi,

I'm iterating through a list which I'm putting into a Bootstrap fluid grid and I need to be able to close a row and then start another one. E.g.:

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>
<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>

Is there any way that I can do this using the standard dialect? I've seen the Pages Dialect linked to from http://forum.thymeleaf.org/Iteration-every-nth-item-td4025160.html#a4025161 but this doesn't quite do what I need either.

Has anyone else managed to do something like this before?

Regards,
Andrew
Reply | Threaded
Open this post in threaded view
|

Re: Iteration: opening/ closing other elements

Zemi
Administrator
It depends on what you are iterating over.

For example, it is pretty straightforward if you have a List of beans, like in:

    <div th:each="user : ${users}"
           class="row-fluid">
       <div class="span4" th:text="${user.name}">...</div>
       <div class="span4" th:text="${user.surname}">...</div>
       <div class="span4" th:text="${user.age}">...</div>
    </div>

If your bean's field count does not match the number of columns, you could do it that way

    <div th:each="user : ${users}" th:remove="tag">
         <div class="row-fluid">
            <div class="span4" th:text="${user.name}">...</div>
            <div class="span4" th:text="${user.surname}">...</div>
            <div class="span4" th:text="${user.age}">...</div>
        </div>
         <div class="row-fluid">
            <div class="span4" th:text="${user.ocuppation}">...</div>
            <div class="span4" th:text="${user.city}">...</div>
            <div class="span4" th:text="${user.phone}">...</div>
        </div>
    </div>
Reply | Threaded
Open this post in threaded view
|

Re: Iteration: opening/ closing other elements

gil_nem
Thanks Zemi, I've tried those and they don't quite do what I need. I think I may have explained what I'm trying to do quite badly though!

At the moment I've got something like the following:

     <div class="row-fluid">
        <div class="span4" th:each="user : ${users}">${user.name}, {$user.age}...</div>
        <div class="span4" th:remove="all">Anon, 20...</div>
        <div class="span4" th:remove="all">Anon, 39...</div>
     </div>
     <div class="row-fluid">
        <div class="span4" th:remove="all">Anon, 45...</div>
        <div class="span4" th:remove="all">Anon, 19...</div>
        <div class="span4" th:remove="all">Anon, 54...</div>
     </div>

What I effectively want to do is create a loop where Thymeleaf will group together 3 users in a 'div.row-fluid' element, closing and opening the containing element where needed.

If that's not possible are we able to iterate over a subset of the ${users} list, e.g. 1-3, 4-6 etc?
Reply | Threaded
Open this post in threaded view
|

Re: Iteration: opening/ closing other elements

Emanuel
Administrator
I responded to a similar question a while back where the dev wanted to group 3 items of their collection together in a table row, before creating a new row for the next 3 items, and so on.  See here: http://forum.thymeleaf.org/Displaying-an-iterable-of-n-items-in-rows-of-3-items-with-thymeleaf-td4025738.html#a4025739

Is that any help?
Reply | Threaded
Open this post in threaded view
|

Re: Iteration: opening/ closing other elements

gil_nem
Thanks Emanuel. With that and another solution you posted in http://forum.thymeleaf.org/Nested-th-each-td4024799.html I got it to work. I made a few tweaks and this is what it looks like now:

<div class="row-fluid" th:each="blockIndex: ${#numbers.sequence(0, #lists.size(myList) - 1, 3)}">
    <div th:each="index: ${#numbers.sequence(blockIndex, blockIndex + 2)}" th:remove="tag" th:with="listItem=${index lt #lists.size(myList) ? myList.get(index) : null}">
        <div class="span4" th:if="${listItem != null}">${item.name}...</div>
        <div class="span4" th:remove="all">...</div>
        <div class="span4" th:remove="all">...</div>
    </div>
</div>
<div class="row-fluid" th:remove="all">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>