JS пагинаторы

Два варианта пагинаторов для нашего шаблона сайта

Простой листинг

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

Пример можно посмотреть в нашем шаблоне на странице produkt.html

Мы будем реализовывать вариант для сайта без БД, переписать скрипт для работы с БД не составит труда.

Простой листинг на js

В html коде страницы есть конструкция

<p id="Pages">Товары</p>

при наличии на странице элемента с ID равным Pages запускается наш JS

$('#Pages').livequery(function(){
...

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

<div id="tov" class="Listing"> </div>

А конкретно получив значение ID, запишем его в переменную

TypeNew=String(($('#Pages ~ div').attr('id')));

Сформируем имя куки для правильной работы с листингом (что бы правильно передвигаться по сайту и листингу)

cookieName='coo'+TypeNew;

и попробуем получить в переменную значение этой куки, вдруг оно уже есть (например, мы уже были на этой странице), используем для работы плагин jquery.cookie

var icooc=$.cookie(cookieName);

Т.к. наш шаблон работает без БД, то нам необходимо где-то хранить адреса всех страниц сайта, для этого отлично подходит карта сайта sitemap.html к ней мы и будем обращаться за не обходимыми сведениями.

$.ajax({
type:'POST',
dataType:'html',
url:pathmap,
cache:false,
success:function(data){

в переменной pathmap находится адрес карты сайта, его мы установили в самом начале нашего JS. В случае успешного запроса в date будет находиться содержимое карты сайта, из него нам необходимо получить нужные фрагменты данных. Тут мы используем маленькую хитрость, в карте сайта нужные нам данные (URL страниц на которых находятся данные для листинга) находятся в блоке с ID равным ID указанным на странице где необходимо организовать листинг (мы сохранили его значение в переменную TypeNew) плюс map

<ul class="mapprod" id="tovmap">
<a href="http://www.site.ru/produkt.html">товары</a>
<li><a href="http://www.site.ru/tovar1.html">товар 1</a></li>
<li><a href="http://www.site.ru/tovar2.html">товар 2</a></li>
<li><a href="http://www.site.ru/tovar3.html">товар 3</a></li>
<li><a href="http://www.site.ru/tovar4.html">товар 4</a></li>
<li><a href="http://www.site.ru/tovar5.html">товар 5</a></li>
<li><a href="http://www.site.ru/tovar6.html">товар 6</a></li>
<li><a href="http://www.site.ru/tovar7.html">товар 7</a></li>
<li><a href="http://www.site.ru/tovar8.html">товар 8</a></li>
<li><a href="http://www.site.ru/tovar9.html">товар 9</a></li>
<li><a href="http://www.site.ru/tovar10.html">товар 10</a></li>
</ul></li>

Сформируем три строковые переменные, idUL='#'+TypeNew; для обращения к элементу на текущей странице для вставки данных, IdMapNew=idUL+'map'; для получения необходимых данных из карты сайта и DataNew=TypeNew+'data'; имя для хранения полученных данных. Сохраним полученный фрагмент данных на текущей странице в блоке idUL под именем DataNew

$(idUL).data(DataNew,$(IdMapNew,data));

Теперь нам необходимо посчитать сколько «страниц» будет в листинге, это зависит от количества данных и количества элементов, которые мы хотим выводить на одном экране (значение NewEventPage установлено в самом начале нашего скрипта), округлим значение до большего целого ds=Math.ceil(($(IdMapNew_Li,data).size())/NewEventPage);
Выводим навигацию пагинатора, она будет выводиться в блок с ID равным Pages.

for(ier=1;ier<ds+1;ier=ier+1){
if(ier!=icooc){ytr=' <span> '+ier+' </span>';$('#Pages').append(ytr)}
else{ytr='<span class="aktiv"> '+ier+' </span>';$('#Pages').append(ytr)};
};

Учтем, на какой странице пагинатора мы должны находиться и пометим её классом aktiv. Для этого проанализируем куку с именем cookieName (значение переменной icooc), если она null, установим её в значение 1 (первая «страница листинга») или получим её числовое значение

if(icooc==null){icooc=1;$.cookie(cookieName,icooc,cookieOptions);}
icooc=icooc*1;

Получение необходимых данных для конкретной страницы листинга, вынесено в отдельную функцию, т.е. нам необходимо её вызвать, в неё мы передаём номер «страницы листинга» NewIT(icooc);
Из-за того что данные будут получаться асинхронно и необходимости сохранить порядок вывода их на странице сформируем заранее необходимое число контейнеров с уникальными ID

var ht_sh='';
for(ieri=0;ieri<NewEventPage;ieri=ieri+1){
ht_sh=ht_sh+'<div id="nn'+ieri+'"></div>';
};

И добавим их на текущую страницу, в элемент с ID значение, которого храниться в переменной idUL

$(idUL).append(ht_sh);

Рассчитаем порядковый номер элемента, с которого нам необходимо начинать вставку данных, зависит от «страницы листинга» переданного в функцию и количества элементов необходимых на странице

n_P=(n_P-1)*NewEventPage+1;

получим в переменную данные сохранённые нами под именем DataNew (весь список URL)

werty=$(idUL).data(DataNew);

в массив запишем только необходимые для данной «страницы листинга» URL

var arr1=[];
for(iir=0;iir<$('li',werty).slice(n_P-1,n_P+NewEventPage).size();iir=iir+1){
arr1[arr1.length]=$('a', werty).slice(iir+ n_P).attr('href').replace('http://www.site.ru/','');
};

Обойдём все элементы массива и получим данные по каждому URL, полученные данные будем записывать под уникальным именем в блок data с ID равным Pages

$(arr1).each(function(i){
var nn=String(this);
$.ajax({
type:'POST',
dataType:'html',
url:nn,
cache:false,
success:function(data){
imya='dop'+i;
$('#Pages').data(imya,data);
rttt=$.inArray(nn,arr1);
Vst1(nn,rttt);
}
});
});

вычисляем текущий индекс элемента в массиве и вызываем функцию вставки Vst1(nn,rttt), которой передаём значение url и индекс текущего элемента
в переменную ht_cod получаем данные сохранённые под именем imya

function Vst1(nn,rttt) {
ht_cod=$('#Pages').data(imya);

далее идёт проверка способа вставки данных (их может быть несколько для разных листингов через конструкцию else if)

if(TypeNew=='tov'){

формируется html кода для вставки и сохраняется в переменную qwe

NewH='<h3>'+$('h1', ht_cod).html()+'</h3>';
NewImg=($('img[itemprop=image]', ht_cod).size() > 0) ? '<img src="' + $("img[itemprop=image]",ht_cod).attr('src').replace('.jpg', '')+'-s.jpg">' : '';
Newprice=($('span[itemprop=price]',ht_cod).size()>0) ? '<p>'+ $('span[itemprop=price]',ht_cod).html() +' руб <i class="col">смотреть товар</i></p>' : '';

на блок вешается класс loc с URL страницы (без расширения) с которой получены данные, для возможности перейти на нужную страницу

qwe='<div class="loc ' + nn.replace('.html', '') + '">' + NewH + NewImg + Newprice + '</div>';

и html вставляется в нужный блок на нашу страницу

var tex_id='#nn'+rttt;
$(tex_id).prepend(qwe);

Осталось дело за малым, написать обработчики событий mouseover, mouseout и click для неактивных элементов навигации пагинатора

$('#Pages span[class!=aktiv]').livequery('mouseover',function(){
$(this).css({'color':'red'});
});
$('#Pages span[class!=aktiv]').livequery('mouseout',function(){
$(this).removeAttr('style');
});

По событию click на неактивном элементе получается содержимое данного элемента, приводится к числовому значению. У всех элементов навигации удаляется форматирование, добавляется класс aktiv элементу, по которому произошёл клик, удаляются выведенные элементы, в куку записывается новое значение и вызывается функция обработки NewIT(nnum) с эти значением, которую мы рассмотрели выше

$('#Pages>span[class!=aktiv]').livequery('click',function(){
nnum=Number($(this).text());
$('#Pages>span').removeClass('aktiv');
$(this).removeAttr('style');
$(this).addClass('aktiv');
$('#Pages ~ div').html(' ');
$.cookie(cookieName, nnum, cookieOptions);
NewIT(nnum);
});

С индексируемыми ссылками

Очень часто необходимо иметь индексируемые ссылки с каталога, для этого случая есть немного другой вариант, пример на странице news.html нашего шаблона. Здесь сама страница выступает в роли «мини карты сайта/раздела», если посмотреть исходный код, то можно увидеть почти знакомую конструкцию

<p id="Pages1">Новости</p>
<div class="Listing">
<a href="new10.html">новость 10</a>
<a href="new9.html">новость 9</a>
<a href="new8.html">новость 8</a>
<a href="new7.html">новость 7</a>
<a href="new6.html">новость 6</a>
<a href="new5.html">новость 5</a>
<a href="new4.html">новость 4</a>
<a href="new3.html">новость 3</a>
<a href="new2.html">новость 2</a>
<a href="new1.html">новость 1</a>
</div>

Как и в первом варианте пагинатора, наличие блока с ID равным Pages1, является сигналом нашему JS для начала работы, всё работает практически так же как и в предыдущем варианте, за исключением того что данные по URL берутся непосредственно со страницы и сохраняются в массив

poiu=[];
for(i=0;i<$('#Pages1 ~ div a').size();i=i+1){
poiu[poiu.length]=$('#Pages1 ~ div a').eq(i).attr('href');
};
Оптимизация
превращается в инструмент конкурентной борьбы
Аудит сайтов
это работа, направленная на повышение его эффективности
Правильный noindex
работает и в яндексе и в гугле