Как добавить следующую и предыдущую кнопки в мою строку пейджера

Question

Как бы я добавил следующие / предыдущие кнопки в этот фрагмент, потому что, как вы видите, он будет отображать столько ссылок, сколько ему нужно, поэтому, если у вас большое количество страниц, это может быть не лучшим решением

 <c:choose>
   <c:when test="${pages >1}">
        <div class="pagination art-hiddenfield" >
             <c:forEach var="i" begin="1"end="${pages}" step="1">
                  <c:url value="MaintenanceListVehicles.htm" var="url">
                      <c:param name="current" value="${i}"/>                
                  </c:url>
                  <c:if test="${i==current}">
                       <a href="<c:out value="${url}"/> " class="current" >
                           <c:out value="${i}" /></a>
                  </c:if>
                  <c:if test="${i!=current}">
                       <a href="<c:out value="${url}"/> " >
                           <c:out value="${i}" /></a>
                  </c:if>
              </c:forEach>
         </div>
    </c:when>
    <c:otherwise>
       <div align="center">                   
       </div>
    </c:otherwise>
</c:choose>

CSS:

.pagination .current {
    background: #26B;
    border: 1px solid #226EAD;
    color: white;
}
.pagination a {
    display: block;
    border: 1px solid #226EAD;
    color: #15B;
    text-decoration: none;
    float: left;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 0.3em 0.5em;
}
.pagination {
    font-size: 80%;
    float: right;
}
div {
    display: block;
}

Это то, что я получаю с моим текущим кодом: И это то, что я хотел бы показать, с многоточием, если это возможно

Надеюсь, вы поможете мне.

Answer 1

Добавление ссылок «Предыдущая / Следующая»

Это должно быть довольно простым, но имейте в виду, что вы, вероятно, не хотите отображать «Предыдущая», если вы на первой странице, или «Следующая», если вы на последнейpage.

Предыдущий / Следующий пример

Вот пример ссылок Предыдущий / Следующий.Добавьте первый блок if над вашим forEach, а второй - под ним.

<c:if test="${currentPage > 1}">
    <c:url value="MaintenanceListVehicles.htm" var="prevUrl">
        <c:param name="current" value="${currentPage - 1}"/>                
    </c:url>
    <a href="<c:out value="${prevUrl}"/>">Prev</a>
</c:if>

<c:if test="${maxPages > currentPage}">
    <c:url value="MaintenanceListVehicles.htm" var="nextUrl">
        <c:param name="current" value="${currentPage + 1}"/>                
    </c:url>
    <a href="<c:out value="${nextUrl}"/>">Next</a>
</c:if>

Отображение многоточия

Это сложнее, поскольку для него требуется алгоритм, а не то, что я бы посоветовалвы используете только JSP EL и / или JSTL (поскольку вам, вероятно, придется использовать скриптлеты, а это плохие новости).В прошлом я использовал класс bean-компонента PaginationHelper в сочетании с файлом тегов JSP 2.0 для реализации этого стиля разбиения на страницы.

Создайте класс с именем PaginationPage, который имеет целочисленный номер страницы иСтрунная этикетка.Пусть PaginationHelper обрабатывает всю логику для вычисления страниц и возвращает тегу PaginationPages список.Затем тегу нужно просто перебрать страницы и вывести их по своему усмотрению.

Логика разбиения на страницы

Вот некоторая логика, которую следует учитывать при реализации этого стиля разбиения на страницы:

• Если страниц меньше 10, просто отобразите все страницы.
• Если номер текущей страницы близок к единице, не отображайте левый многоточие.
• Отображение текущей страницы и трех страниц, предшествующих ей и после нее.Например, если текущая страница - 14, отобразите 11, 12, 13, 14, 15, 16, 17. Вы можете настроить это, чтобы показать больше / меньше трех, но это должно быть одинаковое количество страниц на каждой стороне.
• Если номер текущей страницы близок к общему количеству страниц, не отображайте правильный многоточие.
• Ссылки на многоточии должны представлять среднюю точку между двумя страницами, окружающими его.Используя ваш снимок экрана в качестве примера, первый многоточие будет для страницы 4 ((9 - 2) / 2 = 3,5), а второй многоточие будет для страницы 22 ((61 - 18) / 2 = 21,5).

Различные приложения реализуют эти правила немного по-разному.Не стесняйтесь проверять исходный код других приложений, чтобы увидеть, какие правила они соблюдают.

Answer 2

И, подумав некоторое время, я придумал, как это сделать. Это действительно не очень элегантно, но оно выполняет свою работу. Вот код

   <c:choose>
        <c:when test="${pages>1}">
            <div class="pagination">
                <c:if test="${current > 1}">
                    <c:url value="MaintenanceListVehicles.htm" var="prevUrl">
                        <c:param name="current" value="${current - 1}"/>                           
                    </c:url>
                    <a href="<c:out value="${prevUrl}"/>">Prev</a>
                </c:if>
                <c:set var="begin" value="1" />
                <c:set var="end" value="9" />
                <c:choose>
                    <c:when test="${current-4<=1}">
                        <c:if test="${pages< 9}">
                            <c:set var="end" value="${pages}" />
                        </c:if>
                    </c:when>
                    <c:otherwise>
                        <c:set var="begin" value="${current - 4}" />
                        <c:set var="end" value="${begin + 8}" />
                        <c:if test="${end >=pages}">
                            <c:set var="begin" value="1" />
                            <c:set var="end" value="${pages}" />
                            <c:if test="${pages> 9}">
                                <c:set var="begin" value="${pages- 8}" />
                            </c:if>
                        </c:if>
                    </c:otherwise>
                </c:choose>
                <c:forEach var="i" begin="${begin}" end="${end}" step="1">
                    <c:url value="MaintenanceListVehicles.htm" var="url">
                        <c:param name="current" value="${i}"/>                          
                    </c:url>
                    <c:choose>
                        <c:when test="${i==current}">
                            <a href="<c:out value="${url}"/> " class="current" >
                                <c:out value="${i}" /></a>
                        </c:when>
                        <c:otherwise>
                            <a href="<c:out value="${url}"/> " >
                                <c:out value="${i}" /></a>
                        </c:otherwise>   
                    </c:choose>
                </c:forEach>
                <c:if test="${pages> current}">
                    <c:url value="MaintenanceListVehicles.htm" var="nextUrl">
                        <c:param name="current" value="${current + 1}"/>                          
                    </c:url>
                    <a href="<c:out value="${nextUrl}"/>">Next</a>
                </c:if>
            </div>
        </c:when>
        <c:otherwise>
            <div align="center">
            </div>
        </c:otherwise>
    </c:choose>

Действительно надеюсь, что кто-то еще найдет это полезным!

Answer 3

Похоже, ты очень близко ... Вы смотрели на замену foreach () на цикл while ()?

[PREV] [1] [2]

    while starting at 3 and ending at Total - 2

[LAST 2] [results] [NEXT].

Вы также можете обработать многоточие с помощью условного выражения (вы не захотите, чтобы они появлялись все время - (т.е. 1, 2 ... 3,4,5 ... 6, 7, Далее) .

Я сделал именно это в PHP, но я не хочу вставлять это в JSP q / a. (Я немного подпрыгнул от пистолета). Казалось, вы сможете ответить на свой вопрос с другой точки зрения на ваше решение.