Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2015, 12:55
Новичок на форуме
Отправить личное сообщение для riki-tik Посмотреть профиль Найти все сообщения от riki-tik
 
Регистрация: 14.05.2015
Сообщений: 2

Алгоритм пагинации
Дано:
Количество записей на странице
Количество всех страниц
Количество всех записей.

С этими данными сейчас выводятся страницы все подряд и это очень не красиво выглядит.

Так как статьи будут только умножаться, то количество ссылок на страницы будет расти.

Как сделать чтобы была допустим первая страница, затем те на которой мы находимся, справа и слева от нее две-три и последняя страница?
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2015, 12:58
Аватар для vasa_c
Профессор
Отправить личное сообщение для vasa_c Посмотреть профиль Найти все сообщения от vasa_c
 
Регистрация: 12.03.2008
Сообщений: 183

1. Вывести первую
2. Вывести ту на которой находимся и справа и слева от неё две-три
3. Вывести последнюю
4. PROFIT
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2015, 13:03
Новичок на форуме
Отправить личное сообщение для riki-tik Посмотреть профиль Найти все сообщения от riki-tik
 
Регистрация: 14.05.2015
Сообщений: 2

Нужен пример кода.
Тут есть нюансы типа: На какой странице мы сейчас находимся, здесь нужны правильные проверки на количество, а то вдруг страниц всего две, а выведется две справа и две слева, плюс первая, тогда получится 1 -1 1 2 3 4 2 (если мы на второй находимся.
Прошу помощи с кодом
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2015, 13:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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

Последний раз редактировалось laimas, 14.05.2015 в 13:24.
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2015, 13:30
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Я вот так на PHP делал:

function generatePages($url, $count, $checked = 0, $extra = false) {
		$j = 1 + ($checked < 2 || ($checked > $count - 3) ? 0 : $checked - 2 - ($checked == $count - 3));
		for($i = 1, $l = $count > 7 ? 7 : $count; $i <= $l; $i++, $j++) {
			if($i > 3 && $count > 7) {
				if($i == 4) {
					$result[] = '<a class="pages-change" data-count="'.$count.'" data-url="'.$url.'" title="Выбрать другую страницу">...</a>';
					continue;
				}
				$k = $count - ($l - $i);
			}
			else $k = $j;
			$result[] = '<a '.($checked == $k ? 'class="checked"': 'href="'.$url.'?page='.$k.'"').'>'.$k.'</a>';
		}
		if($extra) {
			array_unshift($result, '<a'.($checked != 1 ? ' href="'.$url.'?page='.($checked - 1).'"' : '').' title="Предыдущая страница">«</a>');
			$result[] = '<a'.($checked != $count ? ' href="'.$url.'?page='.($checked + 1).'"' : '').' title="Следующая страница">»</a>';
		}
		return implode("\n", $result);
	}


generatePages(ссылка, количество страниц, текущая страница. Вкл/Выкл стрелочки)


Итого получается примерно такой код:

<div class="pages">
   <?=generatePages('', 12, 5, true)?>
</div>


<div class="pages">
   <a href="?page=4" title="Предыдущая страница">«</a>
   <a href="?page=4">4</a>
   <a class="checked">5</a>
   <a href="?page=6">6</a>
   <a class="pages-change" title="Выбрать другую страницу">...</a>
   <a href="?page=10">10</a>
   <a href="?page=11">11</a>
   <a href="?page=12">12</a>
   <a href="?page=6" title="Следующая страница">«</a>
</div>


P.S.: мой код конечно не идеален, но я особо не заморачивался.

P.P.S: только сейчас узнал, что это пагинацией называется. Пошёл менять названия классов и ф-ций.

Последний раз редактировалось ruslan_mart, 14.05.2015 в 13:51.
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2015, 13:57
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

https://github.com/nervgh/angular-pagination
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #7 (permalink)  
Старый 14.05.2015, 14:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

riki-tik,

function pagination(b, c, d) {
    return Array(d + 1).join("1").split("").map(function(a, b) {
        return b + 1
    }).filter(function(a, e) {
        return c ? 1 == a || a == b || a == d || a <= b + c && a >= b - c : !0
    })
};
   //pagination(current,step,max ) step = 0 полный диапазон
 alert(pagination(13, 2, 14))
 alert(pagination( 5, 0 , 14))
Ответить с цитированием
  #8 (permalink)  
Старый 15.05.2015, 01:58
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Каждый должен написать свою пагинацию
Мой вариант http://jsfiddle.net/vlasenkofedor/hyQnb/
Ответить с цитированием
  #9 (permalink)  
Старый 16.05.2015, 05:49
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

У всех все неправильно, один я в белом. Решение давно известно, вот такое

задается макс слотов, скажем 10

в эти 10 слотов загоняется весь интерфейс с кнопками, логика построения которого такова:

если паг меньше кол-ва слотов - вывести континуально

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

Например мы на первой странице где их 12

1 2 3 4 5 6 7 … 11 12 Вперед »

Как видите разрыв шаблона начинается со страницы 7. Потому что континуум 5 слотов, а когда он целиком влезает, к нему континуально добавляется неиспользуемый квант начала. Если домотать до страницы 7, то получим

« Назад 1 2 … 5 6 7 8 … 11 12 Вперед »

... - hellip'ы - тоже кнопки, это третья кнопка в боковых отростках которая имеет номер страницы как обычно, но рендерится в качестве индикатора разрыва континуума

Теперь если мотать дальше, то неразрывный диапазон переедет к концу и там захапает отросток

« Назад 1 2 … 6 7 8 9 10 11 12 Вперед »

Он так и будет сдвигаться вправо пока не упрется в конец номеров и на последней странице получится

« Назад 1 2 … 10 11 12

Такая логика обеспечивает всегда отображение начала и конца диапазона страниц и небольшой промежуток для навигации вокруг выбранной.

Такая логика на многих коммерческих сайтах применена. Я по внешним признакам писал код, он на php. Готовый для такой логики найти не удалось, кругом были баяны.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необычный алгоритм. Неповторяющиеся числа. broadcast77 Общие вопросы Javascript 5 13.01.2014 10:46
Алгоритм пагинации Scribblex Элементы интерфейса 3 10.07.2013 21:47
Как написать алгоритм выборки в javascript? Isaac Общие вопросы Javascript 13 06.02.2013 11:15
Волновой алгоритм Ли с 8-ми направлениями boy_cow Общие вопросы Javascript 6 04.10.2012 21:08
Спецификация Ecma-262. Пункт 8.7.2 PutValue(V,W) не до конца ясен алгоритм. vandy3 Общие вопросы Javascript 0 09.01.2012 17:31