суббота, 29 сентября 2012 г.

Codeigniter Bootstrap Pagination

Twitter Bootstrap стал безумно популярным фронт-энд фреймворком. Всё чаще и чаще слышу от клиентов, хочу «бутстрэп» (хотя они до конца сами не понимают что это), это больше дань моде, ну это такое. В этой статье хочу рассказать, как адаптировать стандартый pagination класс CodeIgniter-а под новомодный Bootstrap style.

Я находил много решений, вплоть до кастомного MY_Pagination класса для стилизации Bootstrap под CI, каждый ухитряется, как может. Но, я полагаю, это не лучший выход. Вы лишаетесь гибкости, перекрывая нативный класс пагинации кодигнайтера, если выходит новая версия CodeIgniter обновился класс Pagination, то прийдётся заново его адаптировать и искать что изменилось.

Гораздо более удобный способ, это через конфигурацию самого Pagination навесить все необходимые стили и изменить только «обвёртку» для стандартных элементов интерфейса. Сделать это легко. Создаём в папке application/config/ файл с именем pagination.php. В этот файл дописываем следующий конфиг для Pagination Class:

/* twitter bootstrap overrides */
$config['full_tag_open'] = '<div class="pagination pagination-centered"><ul>';
$config['full_tag_close'] = '</ul></div><!--/pagination-->';

$config['first_link'] = '&laquo; First';
$config['first_tag_open'] = '<li class="prev page">';
$config['first_tag_close'] = '</li>';

$config['last_link'] = 'Last &raquo;';
$config['last_tag_open'] = '<li class="next page">';
$config['last_tag_close'] = '</li>';

$config['next_link'] = 'Next &rarr;';
$config['next_tag_open'] = '<li class="next page">';
$config['next_tag_close'] = '</li>';

$config['prev_link'] = '&larr; Previous';
$config['prev_tag_open'] = '<li class="prev page">';
$config['prev_tag_close'] = '</li>';

$config['cur_tag_open'] = '<li class="active"><a href="">';
$config['cur_tag_close'] = '</a></li>';

$config['num_tag_open'] = '<li class="page">';
$config['num_tag_close'] = '</li>';
/* END twitter bootstrap overrides */

Ну и финальный штрих, это подгрузить наш конфигурационный файл в место, где происходит инициализация pagination в самом контроллере, например:


$this->config->load('pagination', TRUE);
$config = array_merge($this->config->item('pagination'), Array(
  'base_url'   => site_url('items/'),
  'total_rows'  => $total,
  'per_page'   => 10,
  'uri_segment'  => 2
  ));
$this->load->library('pagination');
$this->pagination->initialize($config);

Всё, теперь в любом месте, где вы будете рендерить элементы для постраничной навигации, будет выводиться Codeigniter Bootstrap Pagination. Приведеный выше пример гарантированно рабочий и отлаженный, работает на версии CodeIgniter Framework 2.1.2 и Twitter Bootstrap Version 2.1.1.

3 комментария:

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

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: total

    Filename: controllers/articles.php

    Line Number: 38

    ОтветитьУдалить
  2. Ув. skif1965, у вас простая ошибка с неопределённой переменной.

    Перед использованием пейджинга нужно сделать выборку элементов, которые вы хотите разбивать по страницам, точнее нужно знать общее количество элементов. Объявить и инициализировать переменную $total, в которую положить count() записей. В противном случае класс Pagination не будет правильно инициализирован.

    ОтветитьУдалить

Рекоммендую

Попробуйте надёжный хостинг от Scala Hosting