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'] = '« First';
$config['first_tag_open'] = '<li class="prev page">';
$config['first_tag_close'] = '</li>';
$config['last_link'] = 'Last »';
$config['last_tag_open'] = '<li class="next page">';
$config['last_tag_close'] = '</li>';
$config['next_link'] = 'Next →';
$config['next_tag_open'] = '<li class="next page">';
$config['next_tag_close'] = '</li>';
$config['prev_link'] = '← 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.
