Пагинация на JQuery: как выбрать готовые наработки?

[Everybody]

В последнее время мне пришлось столкнуться с проблемой постраничной навигации (pagination), и, дабы не изобретать велосипед, я сразу же решил поискать готовые решения. Как оказалось, их не так уж и много. В конце концов, я остановил свой выбор на приемлемом для меня решении, о котором и пойдет речь в этой статье. Сие решение представляет собой скрипт, использующий jQuery и способный обеспечивать быструю и простую навигацию используя AJAX. Я несколько изменил исходный скрипт, чтобы получить таблицу с одинаковым количеством строк (в исходном варианте таблица всегда имела размер в зависимости от количества получаемых данных), плюс я добавил эффекты затухания при прорисовке.


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


Создание постраничной навигации начнем собственно с таблицы, которую мы будем заполнять данными:
HTML

Код Выделить Развернуть

<table id="list" width="100%" cellspacing="0"><br>    <caption>Таблица 1: Некоторые произвольные данные</caption><br>    <thead><br>      <tr><br>        <th scope="col">Название</th><br>        <th scope="col">Автор</th><br>        <th scope="col">Дата</th><br>        <th scope="col">ID</th><br>      </tr><br>    </thead><br>    <tbody><br>    <tr><td scope="row" class="spec"><span></span></td><td><span></span></td><td><span></span></td><td><span></span></td></tr><br>    <!-- еще девять таких же строк --><br>    </tbody><br>    <tfoot><br>      <tr><br>        <td colspan="4"><br>          <ul class="paginator"></ul><br>        </td><br>      </tr><br>    </tfoot><br></table>
Как видите, это самая обыкновенная пустая таблица, внутри каждой ячейки которой находится элемент <span>. Сразу же после загрузки страницы, эта таблица будет заполняться данными получаемыми из AJAX запроса. Пустой контейнер ul с классом paginator будет использоваться для хранения ссылок навигации. Эти ссылки будут обновляться после каждого обновления таблицы.

Далее подключаем скрипт пагинатора:
HTML

Код Выделить Развернуть

jQuery.fn.pageinate = function (settings) {<br><br>    // Настройки по умолчанию<br>    var settings = jQuery.extend({<br>      row: function (container, item, i) {},<br>      page: function (i) {},<br>      url: "",<br>      show: 10,<br>      start_page:1<br>    }, settings);<br><br>    // элемент, который будет использоваться для пагинатора<br>    settings.pagelist_selector = jQuery(settings.pagelist_selector);<br><br>    return this.each(function(_, element){<br>      // jQuery-wrap element<br>      element = $(element);<br><br>      var page_link_callback_creator = function(i) {<br>        return function() {<br>          $(this).html(' ');<br>          $(this).attr('class','waiting');<br>          update(i);<br>        }<br>      };<br><br>      var update = function (page) {<br><br>        jQuery.getJSON(settings.url, {page:page, show:settings.show}, function(data){<br>          // Обрабатываем результаты JSON запроса<br>          pages = data['pages'];<br>          posts = data['posts'];<br><br>          // прорисовка строк таблицы<br>          for (var i=0; i < settings.show; i++) {<br>            if (posts[i])<br>              settings.row(element, posts[i], i);<br>            else<br>              settings.row(element, false, i);<br>          }<br><br>          settings.pagelist_selector.fadeOut(100, function(){<br>            settings.pagelist_selector.html("");<br>            // создание пагинатора<br>            for (i=1; i <= pages; i++) {<br>              selected = page==i<br>              page_link = settings.page(i, selected);<br>              settings.pagelist_selector.append(page_link);<br><br>              if(!selected) {<br>                page_link.click(page_link_callback_creator(i));<br>              }<br>            }<br>            settings.pagelist_selector.fadeIn(100);<br>          });<br>        });<br>      };<br><br>      // Первоначальное получение данных<br>      update(settings.start_page);<br>    });<br>}
Код пагинатора реализован в виде jQuery плагина. В самом начале определяются настройки пагинатора - количество строк на странице (show), с какой страницы начинать просмотр (start_page), url для AJAX запросов (url). Однако основными параметрами в этих опциях являются обработчики row и page, которые нужны для прорисовки строк таблицы и пагинатора.

Плагин работает следующим образом: в самом последней строке плагина вызывается функция update(), которая выполняет AJAX запрос к серверу (адрес указан в опции url). Полученные от сервера данные в формате JSON обрабатываются и добавляются в таблицу:
HTML

Код Выделить Развернуть

// прорисовка строк таблицы<br>for (var i=0; i < settings.show; i++) {<br>    if (posts[i])<br>      settings.row(element, posts[i], i);<br>    else<br>      settings.row(element, false, i);<br>}
После этого происходит прорисовка пагинатора, используя эффекты затухания (fadeOut и fadeIn).

Теперь рассмотрим скрипт в котором мы будем использвать созданный нами плагин:
HTML

Код Выделить Развернуть

$(document).ready(function(){<br><br>    $("#list tbody").pageinate({<br>      url: "server.php",<br>      pagelist_selector: "#list ul",<br>      start_page: 1,<br><br>      row:function(container, item, i){<br>        $("#list tbody tr:eq("+i+") td").each(function(i){<br>          if (!item)<br>            $(this).html('<span> </span>');<br>          else {<br>            switch (i){<br>              case 0:<br>                $(this).html('<span>'+item['title']+'</span>');<br>                break;<br>              case 1:<br>                $(this).html('<span>'+item['author']+'</span>');<br>                break;<br>              case 2:<br>                $(this).html('<span>'+item['date']+'</span>');<br>                break;<br>              case 3:<br>                $(this).html('<span>'+item['id']+'</span>');<br>                break;<br>            }<br>          }<br>        });<br>      },<br><br>      page:function(id, selected) {<br>        return $('<li class="'+(selected?"selected":"")+'">'+id+'</li>');<br>      }<br>    });<br><br>});Вызывается он обычным для jQuery образом, указывая все перечисленные выше опции - url, pagelist_selector и т.п.:
HTML

$("#list tbody").pageinate({});

В качестве обработчиков row() и page() указываем функции, рисующие строку и пагинатор. Как видите, функции несложные, в особенности page(), где просто создается новый элемент li с номером страницы. Если страница текущая, то для созданного элемента указывается класс selected. Обработчик row() несколько сложнее - он целиком и полностью зависит от получаемых от сервера данных. В самом начале функция получает указатели на все ячейки строки (аргумент i указывает на строку таблицы), в которую нужно поместить значение:
HTML

$("#list tbody tr:eq("+i+") td").each(function(i){})

Затем, используя функцию each() поочередно добавляем нужные нам данные в соответствующие ячейки используя конструкцию switch. Если в функцию передан пустой аргумент item (пустая ячейка), то в содержимое ячейки очищается (визуально - span там нужен, чтобы пустая ячейка имела те же размеры что и заполненая):
HTML

Код Выделить Развернуть

if (!item)<br>    $(this).html('<span> </span>');

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

На сегодня это все.
До встречи!

Источник: jstoolbox.com