Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.06.2020, 15:45
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,368

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h3>Variant 1</h3>

    <div id="panel1"></div>
    <h3>Variant 2</h3>

    <div id="panel2"></div>
    <h3>Variant 3</h3>

    <div id="panel3"></div>
    <h3>Variant 4</h3>

    <div id="panel4"></div>
    <h3>Variant 5</h3>

    <div id="panel5"></div>
    <h3>Variant 6</h3>

    <div id="panel6"></div>
    <h3>Variant 7</h3>

    <div id="panel7"></div>
    <h3>Variant 8</h3>

    <div id="current_page">Click on page:</div>
    <div id="panel8"></div>
    <h3>Variant 9</h3>

    <div id="panel9"></div>
    <input type="button" class="btn btn-default" value="Show current page" id="show_page">

    <h3>Variant 10</h3>

    <div id="panel10"></div>
    <input id="range" type="range" min="1" max="100" value="1" title="Range">
    <br>
    <br>
    <br>
</div>
<script src="https://raw.githack.com/vlasenkofedor/pagination/master/pagination.js"></script>
<script>
    Pagination(
            {
                tag: '#panel1',
                sizing: 'pagination-sm',
                current: 3
            }
    ).onclick(showPage);
    Pagination(
            {
                tag: '#panel2'
            }
    ).onclick(showPage);
    Pagination(
            {
                tag: '#panel3',
                sizing: 'pagination-lg',
                current: 5
            }
    ).onclick(showPage);
    Pagination(
            {
                tag: '#panel4',
                prev_next: false,
                current: 2
            }
    ).onclick(showPage);
    Pagination(
            {
                tag: '#panel5',
                first_last: false,
                current: 4
            }
    ).onclick(showPage);
    Pagination(
            {
                tag: '#panel6',
                prev_next: false,
                first_last: false
            }
    ).onclick(showPage);
    Pagination(
            {
                tag: '#panel7',
                row: 7, // кол-во в ряду
                total: 32, // всего
                step: 7, // перелистывать по
                current: 7, // текущая позиция
                prev_text: 'Назад', // prev text
                next_text: 'Вперед', // next text
                last_text: 'Вконец', // last text
                first_text: 'Вначало' // first text
            }
    ).onclick(showPage);
    Pagination(
            {
                tag: '#panel8'
            }
    ).onclick(function (page) {
        document.getElementById('current_page').innerHTML = 'Click on page: ' + page;
    });
    var panel9 = Pagination(
            {
                tag: '#panel9'
            }
    );
    document.getElementById('show_page').addEventListener('click', function () {
        alert(panel9.value);
    }, false);
    var panel10 = Pagination(
            {
                tag: '#panel10',
                row: 10, // кол-во в ряду
                total: 100 // всего
            }
    );
    var range = document.getElementById('range');
    range.addEventListener('change', function () {
        panel10.value = this.value;
    }, false);
    panel10.onclick(function (page) {
        range.value = page;
    });
    function showPage(page) {
        alert('Page: ' + page);
    }
</script>
</body>

https://github.com/vlasenkofedor/pagination

Последний раз редактировалось Vlasenko Fedor, 25.06.2020 в 15:47.
Ответить с цитированием
  #12 (permalink)  
Старый 25.06.2020, 15:45
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 66

Сообщение от laimas Посмотреть сообщение
Если, к примеру, данные этого объекта поместить в SQL базу на клиенте...)
О, это кстати интересно. Можно будет подумать от этом на досуге. Спасибо.
Ответить с цитированием
  #13 (permalink)  
Старый 25.06.2020, 15:51
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,355

Сообщение от CryNet
Можно будет подумать от этом на досуге.
Тут не столько это, хотя это удобно, а тем более данным в SQL можно указать индексы, что ускоряет выборку (хотя SQL базу пока не все браузеры поддерживают). Тут сама суть вашего вопроса.

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

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

Последний раз редактировалось laimas, 25.06.2020 в 15:53.
Ответить с цитированием
  #14 (permalink)  
Старый 25.06.2020, 15:52
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 66

Vlasenko Fedor, У меня другой пагинатор: https://codepen.io/CryNet/pen/qBbjVda?editors=1010

Правда я его привёл к виду как на скрине в первом посте.
Ответить с цитированием
  #15 (permalink)  
Старый 25.06.2020, 15:55
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 66

laimas,
я понял. Спасибо ещё раз
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить свойсвто объекта? Armen Общие вопросы Javascript 4 19.10.2014 05:45
Как получить значение цвета из color picker razorg1991 jQuery 1 06.10.2014 08:06
Как получить в JQUERY каждую строку как отдельный объект? Alex1233 Общие вопросы Javascript 3 22.08.2014 05:54
Как получить значение переменной из игры на HTML5? Dimaz Общие вопросы Javascript 6 10.08.2014 15:27
Как получить указатель на элемент вызвавший функцию pelayo Общие вопросы Javascript 9 29.06.2010 22:32