Dynamic pagination jQuery plugin. Как вставлять контент?

@Eugene-nsk · Регистрация: 27.07.2014

Студворк — интернет-сервис помощи студентам

Есть dynamic pagination jQuery plugin. Вот страница разработчика http://botmonster.com/jquery-bootpag/
А вот пример использования:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
    <div id="content">Dynamic Content goes here</div>
    <div id="page-selection">Pagination goes here</div>
    <script>
        // init bootpag
        $('#page-selection').bootpag({
            total: 10
        }).on("page", function(event, /* page number here */ num){
             $("#content").html("Insert content"); // some ajax content loading...
        });
    </script>
</body>
</html>

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

@Игорь[Igor] · 10.08.2014, 00:30

Между тегими и будет вставляться

JavaScript
1
<div id="content">Dynamic Content goes here</div>

т.е. в данном случае на место строки "Dynamic Content goes here"

Добавлено через 1 минуту
Вставка

JavaScript
1
$("#content").html("Insert content");

На то место будет вставлена строка "Insert content"

@Eugene-nsk · 10.08.2014, 00:37 **[ТС]**

Непонятно. Грубо говоря, у меня есть несколько блоков:

HTML5
1
2
3
4
5
<div>Страница 1</div>
<div>Страница 2</div>
<div>Страница 3</div>
<div>Страница 4</div>
<div>Страница 5</div>

По одному div блоку на каждую страницу. И как это реализовать?

@Игорь[Igor] · 10.08.2014, 00:41

Каждый этот блок по отдельности хочеш выводить?

@Eugene-nsk · 10.08.2014, 00:46 **[ТС]**

Сообщение от Игорь[Igor]

Каждый этот блок по отдельности хочеш выводить?

я так понимаю, что скрипт создан, чтобы без перезагрузки страницы выводить пространично контент. Однако как это реализовать, не очень-то понятно. Или этот код создан для просто для отображения постраничного вывода?

@Игорь[Igor] · 10.08.2014, 00:55

Да, отображения постраничного вывода, что будет в контенте это уже самому решать, переменная num это номер выбранной странички и по нему уже определяй что будеш загружать и как

@Eugene-nsk · 10.08.2014, 01:01 **[ТС]**

Сообщение от Игорь[Igor]

Да, отображения постраничного вывода

Очень жаль. Отобразить постраничный вывод можно и более простым способом. Буду искать другой paginator...

@Игорь[Igor] · 10.08.2014, 01:12

Ну если можно, зачем искать, не проще сделать самому тогда?

@Eugene-nsk · 10.08.2014, 01:25 **[ТС]**

Сообщение от Игорь[Igor]

Ну если можно, зачем искать, не проще сделать самому тогда?

Так без этого плагина такое же постраничное разделение прекрасно формируется обычным html, нашпигованным стилями bootstrap. Но мне нужно постраничное разделение без перезагрузки страницы и без php. Т.е. в зависимости от нажатия на ту или иную кнопку страницы, будут отображаться те или иные блоки, идущие один за другим.

@Игорь[Igor] · 10.08.2014, 01:44

Так и будет происходить без перезагрузки страници, только нужно свормировать все и блоки наверное в разных файлах которые будут загружаться, там есть параметр href: "#pro-page-{{number}}"
pro-page- название странички
{{number}} выбранный номер

Добавлено через 2 минуты
Если вообще без загрузки аккаунта, то тоже можно, скрыть и показывать нужный блок

Добавлено через 2 минуты
Возможно через innerHTML

@Eugene-nsk · 10.08.2014, 01:44 **[ТС]**

Сообщение от Игорь[Igor]

Если вообще без загрузки аккаунта, то тоже можно, скрыть и показывать нужный блок

Конечно можно и я уже нашел как - http://web.enavu.com/tutorials... on-system/

@Игорь[Igor] · 10.08.2014, 01:56

А если допустим контент большой, то первый вариант лучше

@Eugene-nsk · 10.08.2014, 02:20 **[ТС]**

Сообщение от Игорь[Igor]

А если допустим контент большой, то первый вариант лучше

Мне нужно, чтобы переменные типа $page не передавались в адресе, например, так site.com/index.php?page=29
Чтобы этого не было можно реализовать ajax, но тогда необходимо создавать отдельный php-файл обработчик, а это слишком много мороки.

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

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	10.08.2014, 00:41
	Каждый этот блок по отдельности хочеш выводить? 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	10.08.2014, 00:55
	Да, отображения постраничного вывода, что будет в контенте это уже самому решать, переменная num это номер выбранной странички и по нему уже определяй что будеш загружать и как 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	10.08.2014, 01:12
	Ну если можно, зачем искать, не проще сделать самому тогда? 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	10.08.2014, 01:44
	Так и будет происходить без перезагрузки страници, только нужно свормировать все и блоки наверное в разных файлах которые будут загружаться, там есть параметр href: "#pro-page-{{number}}" pro-page- название странички {{number}} выбранный номер Добавлено через 2 минуты Если вообще без загрузки аккаунта, то тоже можно, скрыть и показывать нужный блок Добавлено через 2 минуты Возможно через innerHTML 0

@Игорь[Igor] 726 / 478 / 130 Регистрация: 24.12.2008 Сообщений: 3,924
	10.08.2014, 01:56
	А если допустим контент большой, то первый вариант лучше 0