Codeigniter Pagination with Twitter Bootstrap

CodeIgniter

I recently needed to add pagination to a CodeIgniter project, so I used the pagination helper to accomplish that. The only problem was styling the output using twitter bootstrap. The default pagination output was not output in an unordered list, and it was missing all the class assignments for styling. So, a quick Google search turn up these config setting that can be sent to the pagination helper in the controller, and viola bootstrap styling.


$this->load->library('pagination');

$config['per_page'] = 2;
$config['uri_segment'] = 3;
$config['num_links'] = 9;
$config['page_query_string'] = TRUE;

$config['query_string_segment'] = 'page';

$config['full_tag_open'] = '<div class="pagination"><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>';

$config['anchor_class'] = 'class="follow_link"';

$this->pagination->initialize($config);

If you are using bootstrap for your entire site, and want these settings to be the default for pagination, you can create the file config/pagination.php, and paste the following in it.  Then you will only need to define the per page and limits.  The other config settings for bootstrap will be set automatically for you.


<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

 // change default output to work with twitter bootstrap styling
 $config['full_tag_open'] = '<div class="pagination"><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>';

 $config['anchor_class'] = 'class="follow_link"';

reference: http://stackoverflow.com/questions/12164114/codeigniter-bootstrap-pagination

Scroll to Top