Ограничить количество страниц, отображаемых в начальной загрузке 3 разбивки на страницы

У меня есть различные веб-страницы на моем веб-сайте, которые используют разбиение на страницы bootstraps (bootstrap 3), но мне нужно знать, как ограничить количество отображаемых в нем страниц (например, отображать только страницы с 1 по 10).

Если вы затем выберете страницу 2, стр. 11 отобразится b и т.д.

Как вы это делаете?

Я знаю, что это, вероятно, Java/Jquery, но любая помощь будет оценена. и если это можно сделать без использования Java/JQuery, то все лучше.

Ниже приведен скриншот моей разбивки на страницы.

Как вы можете видеть, отображено 12 страниц, я хотел бы, чтобы страницы 11 и 12 были скрыты до тех пор, пока страница 2 или следующая страница не будут выбраны, тогда страницы 11 будут отображаться, а страницы будут скрыты, поэтому и так далее.

Ответ 1

Существует плагин jquery для работы с бутстрапом, который решает эту проблему: http://esimakin.github.io/twbs-pagination/ Посмотрите раздел "видимые страницы".

Вы можете найти другие/решения с помощью google и bootstrap 3 pagination many pages.

Ответ 2

Вы можете попробовать reviews.maxPages, как показано ниже:

<pagination 
    total-items="reviews.count"
    ng-model="reviews.pageNo"
    max-size="reviews.maxPages"
    boundary-links="true"
    rotate="false"
    num-pages="reviews.noPages"
    ng-change="changePageTo(reviews.pageNo)"></pagination>

Ответ 3

Предполагая, что ваша страница отображается на стороне сервера (PHP, Ruby, Java и т.д.), вам, вероятно, захочется отобразить правильную разбивку страницы на стороне сервера.

Я решил эту проблему не так давно в PHP, у меня была функция, которая была вызвана для каждого номера страницы, который решил, должно ли это число отображаться (или что-то еще).

Что-то вроде этого

if the page number is < 3, render the page number
if the page number is within +-2 of the current page, render the page number
if the page number is > the total number of pages -3 render the page number
if the last page number wasn't rendered and dots haven't already been rendered render dots '...' do indicate a gap

else do nothing

Я надеюсь, что это указывает на правильное направление

Ответ 4

Этот вопрос задавали давно, но он появился, когда я искал ответ.

Задание max-size='X' работал у меня. Тег постраничного разбиения будет выглядеть так:

<pagination class="pagination-sm" total-items="1000" items-per-page="10" max-size="10">
</pagination>

Надеюсь, это поможет кому-то.