Вед-дев, Сео, Манимейкинг

Темизация пейджера в Drupal 7

Если вас не устраивает стандартный вид страничной навигации в Drupal 7, то её можно поменять на что-нибудь вроде такого

Темизация пейджера в Drupal 7

Понравилось? Это можно реализовать при помощи переопределения следующих функций:

  • theme_pager()
  • theme_pager_previous()
  • theme_pager_next()

Начнём с самой основной функции theme_pager()

/*
 * theme_pager();
 */


function YOURTHEMENAME_pager($variables) {
  $tags = $variables['tags'];
  $element = $variables['element'];
  $parameters = $variables['parameters'];
  $quantity = $variables['quantity'];
  global $pager_page_array, $pager_total, $theme;

  // Add js code for Ctrl+arrows navigation
  drupal_add_js(drupal_get_path('theme', $theme) . '/js/paginator.js');

  // Calculate various markers within this pager piece:
  // Middle is used to "center" pages around the current page.
  $pager_middle = ceil($quantity / 2);
  // current is the page we are currently paged to
  $pager_current = $pager_page_array[$element] + 1;
  // first is the first page listed by this pager piece (re quantity)
  $pager_first = $pager_current - $pager_middle + 1;
  // last is the last page listed by this pager piece (re quantity)
  $pager_last = $pager_current + $quantity - $pager_middle;
  // max is the maximum page number
  $pager_max = $pager_total[$element];
  // End of marker calculations.

  // Prepare for generation loop.
  $i = $pager_first;
  if ($pager_last > $pager_max) {
    // Adjust "center" if at end of query.
    $i = $i + ($pager_max - $pager_last);
    $pager_last = $pager_max;
  }
  if ($i <= 0) {
    // Adjust "center" if at start of query.
    $pager_last = $pager_last + (1 - $i);
    $i = 1;
  }
  // End of generation loop preparation.

  $li_previous = theme('pager_previous', array('text' => (isset($tags[1]) ? '←' : NULL), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));
  $li_next = theme('pager_next', array('text' => (isset($tags[3]) ? '→' : NULL), 'element' => $element, 'interval' => 1, 'parameters' => $parameters));

  $li_first = theme('pager_first', array('text' => 1, 'element' => $element, 'parameters' => $parameters));
  $li_last = theme('pager_last', array('text' => $pager_max, 'element' => $element, 'parameters' => $parameters));

  // First-page link display condition
  $show_first = ($i > 1) ? true : false;

  if ($pager_total[$element] > 1) {
    if ($li_previous) {
      $items[] = array(
        'class' => array('pager-previous'),
        'data' => $li_previous,
      );
    }

    if ($show_first && $li_first) {
      $items[] = array(
        'class' => array('pager-first'),
        'data' => $li_first,
      );
    }

    // When there is more than one page, create the pager list.
    if ($i != $pager_max) {
      if ($i > 2) {
        $items[] = array(
          'class' => array('pager-ellipsis'),
          'data' => '…',
        );
      }
      // Now generate the actual pager piece.
      for (; $i <= $pager_last && $i <= $pager_max; $i++) {
        if ($i < $pager_current) {
          $items[] = array(
            'class' => array('pager-item'),
            'data' => theme('pager_previous', array('text' => $i, 'element' => $element, 'interval' => ($pager_current - $i), 'parameters' => $parameters)),
          );
        }
        if ($i == $pager_current) {
          $items[] = array(
            'class' => array('pager-current'),
            'data' => '<span>' . $i . '</span>',
          );
        }
        if ($i > $pager_current) {
          $items[] = array(
            'class' => array('pager-item'),
            'data' => theme('pager_next', array('text' => $i, 'element' => $element, 'interval' => ($i - $pager_current), 'parameters' => $parameters)),
          );
        }
      }
      if ($i < $pager_max) {
        $items[] = array(
          'class' => array('pager-ellipsis'),
          'data' => '…',
        );
      }
    }

    // Last-page link display condition
    $show_last = ($pager_max > ($i-1)) ? true : false;

    // End generation.
    if ($show_last && $li_last) {
      $items[] = array(
        'class' => 'pager-last',
        'data' => $li_last,
      );
    }

    if ($li_next) {
      $items[] = array(
        'class' => array('pager-next'),
        'data' => $li_next,
      );
    }
    return '<h2 class="element-invisible">' . t('Pages') . '</h2>' . theme('item_list', array(
      'items' => $items,
      'attributes' => array('class' => array('pager')),
    ));
  }
}

Следующая функция theme_pager_previous() отвечает за вывод кнопки вернуться назад

/*
 * theme_pager_previous()
 */


function YOURTHEMENAME_pager_previous($variables) {
  $text = $variables['text'];
  $element = $variables['element'];
  $interval = $variables['interval'];
  $parameters = $variables['parameters'];
  global $pager_page_array;
  $output = '';

  // If we are anywhere but the first page
  if ($pager_page_array[$element] > 0) {
    $page_new = pager_load_array($pager_page_array[$element] - $interval, $element, $pager_page_array);

    // If the previous page is the first page, mark the link as such.
    if ($page_new[$element] == 0) {
      $output = theme('pager_first', array('text' => $text, 'element' => $element, 'parameters' => $parameters));
    }
    // The previous page is not the first page.
    else {
      $output = theme('pager_link', array('text' => $text, 'page_new' => $page_new, 'element' => $element, 'parameters' => $parameters));
    }
  } elseif ($pager_page_array[$element] == 0) {
    $output = theme('pager_link', array('text' => $text, 'element' => $element, 'parameters' => $parameters));
  }
  return $output;
}

Последняя функция theme_pager_next() отвечает за вывод кнопки далее

/*
 * theme_pager_next()
 */


function koroffka_pager_next($variables) {
  $text = $variables['text'];
  $element = $variables['element'];
  $interval = $variables['interval'];
  $parameters = $variables['parameters'];
  global $pager_page_array, $pager_total;
  $output = '';

  // If we are anywhere but the last page
  if ($pager_page_array[$element] < ($pager_total[$element] - 1)) {
    $page_new = pager_load_array($pager_page_array[$element] + $interval, $element, $pager_page_array);
    // If the next page is the last page, mark the link as such.
    if ($page_new[$element] == ($pager_total[$element] - 1)) {
      $output = theme('pager_last', array('text' => $text, 'element' => $element, 'parameters' => $parameters));
    }
    // The next page is not the last page.
    else {
      $output = theme('pager_link', array('text' => $text, 'page_new' => $page_new, 'element' => $element, 'parameters' => $parameters));
    }
  } elseif ($pager_page_array[$element] == $pager_total[$element] - 1) {
    $output = theme('pager_link', array('text' => $text, 'element' => $element, 'parameters' => $parameters));
  }

  return $output;
}

После добавления этих функций, не забудьте очистить друпаловский кеш. Далее мы будем осуществлять функционал перелистывания страниц пейджера при помощи хоткеев Ctrl + → и Ctrl + ←

Для этого создадим JS файл с названием paginator.js

(function($) {
    paginator = function () {
        /**
         * Private properties
         */

        var linkNext = null;
        var linkPrev = null;

        /**
         * Private methods
         */

        var setLinks = function () {
            linkPrev = $("ul.pager li.pager-previous a").attr("href");
            linkNext = $("ul.pager li.pager-next a").attr("href");
        };

        var navigate = function (event) {
            var href = null;
            if (event.ctrlKey && event.keyCode == 37) href = linkPrev;
            if (event.ctrlKey && event.keyCode == 39) href = linkNext;
            if (href) document.location = href;
        };

        /**
         * Public methods
         */

        this.__init = function () {
            // Get next/prev hrefs
            setLinks();

            // Ctrl + arrow event handle
            $(document).keydown( function(event) {
                navigate(event);
            });
        }
    };

    $(document).ready(function(){
        var pageNavigation = new paginator();
        pageNavigation.__init();
    });
})(jQuery);

Данный файл был подключен в функции theme_pager(), поэтому, дополнительно его больше нигде не нужно подключать.

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



Комментарии (3)

Спасибо за отличный пост.
Подскажи, пожалуйста, как в случае данного примера сделать так, чтобы в последних страниц выводилось две (220, 221) и кол-во страниц до троеточия семь, к примеру.
Спасибо.

Добрый день, сделал все как описано, за исключением того, что не подключал paginator.js. В приципе все получилось, только вот ссылки вперед/назад пустые(нет стрелок)

  • Подскажите, как это исправить

    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое.

    Разделы

    Подписаться

    Подписка на RSS-лента последние записи из Блога

    Комменты

    • Olzhas 8 месяцев 3 недели назад
      Спасибо. С Новым Годом! 
    • Den 9 месяцев 3 недели назад
      В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
    • Гость 9 месяцев 3 недели назад
      Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
    • Валерий 10 месяцев 2 недели назад
      да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
    • admin 10 месяцев 3 недели назад
      Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
    • Валерий 10 месяцев 3 недели назад
      захожу на mysql через ssh по команде  
    • admin 10 месяцев 3 недели назад
      Добрый вечер, какой у вас клиент? 
    • Валерий 10 месяцев 3 недели назад
      Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
    • Eduard 11 месяцев 1 неделя назад
      Видать, домен хороший был. Заявление пробывали писать на мошенника? 
    • Stas 1 год 2 недели назад
      Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!