User    Email              Birthday
--------------------------------------
Bob     bob@gmail.com      01/01/1980
Alice   alice@gmail.com    01/02/1990
Charles charles@gmail.com  01/02/1990
--------------------------------------
              | 1 | 2 |

<%-- the jsp receives :
      - the controller containing the data : among which, a vector of members
      - the memberPageNumer, initalized at 1
      - memberPageSize, containing the max number of rows
--%>
<table>
    <%-- Headers --%>
    <thead>
        <tr>
            <th>User</th>
            <th>Email</th>
            <th>Birthday</th>
        </tr>
    </thead>

    <%-- Body : populated using a forEach loop --%>
    <tbody>
        <%-- We iterate on the controller data
              - as memberPageNumber is initialized at 1, we take members 0 to 2 at first
              - the goal is to display the correct range according to the memberPageNumber parameter
        --%>
        <c:forEach items="${controller.members}" var="m" begin="${(memberPageNumber-1)*memberPageSize }" end="${memberPageNumber*memberPageSize-1 }">
            <tr>
                <td><c:out value="${memberPageNumber} : ${m.name}" /></td>
                <td><c:out value="${m.email}" /></td>
                <td><c:out value="${m.birthday}" /></td>
            </tr>
        </c:forEach>
    </tbody>
</table>

<div class="text-center">
    <ul class="pagination">
        <c:forEach var="i" begin="1" end="${controller.members.size()}" step="${memberPageSize}">
            <fmt:formatNumber value="${1+i/memberPageSize }" var="pageNumber" maxFractionDigits="0"/>
            <li><a href="
                <c:url value="/home">
                    <c:param name="memberPageSize" value="${memberPageSize}"/>
                    <c:param name="controller" value="${controller}"/>
                    <c:param name="memberPageNumber" value="${pageNumber}"/>
                </c:url>">
                ${pageNumber}
            </a></li>
        </c:forEach>
    </ul>
</div>