Press ESC to close

Manoj Bist

How To Customize CodeIgniter Pagination Design


How To Customize Pagination Design in CodeIgniter

CodeIgniter is an Application Development Framework – a toolkit – built in Php. It helps Application development faster than writing code from scratch. It has some common usages library.
Have a look, how I solve How To Customize CodeIgniter Pagination Design problem.

Step 1. Create a file pagination.php in application/config/ .
Step 2. Copy the following code and paste in pagination.php


var $base_url   = ''; // The page we are linking to
var $prefix   = ''; // A custom prefix added to the path.
var $suffix   = ''; // A custom suffix added to the path.
var $total_rows   =  0; // Total number of items (database results)
var $per_page   = 10; // Max number of items you want shown per page
var $num_links   =  2; // Number of "digit" links to show before/after the currently viewed page
var $cur_page   =  0; // The current page being viewed
var $use_page_numbers = FALSE; // Use page number for segment instead of offset
var $first_link   = '‹ First';
var $next_link   = '&raquo';
var $prev_link   = '&laquo';
var $last_link   = 'Last ›';
var $uri_segment  = 3;
var $full_tag_open  = '<ul class="pagination">';
var $full_tag_close  = '</ul>';
var $first_tag_open  = '<li>';
var $first_tag_close = '</li>';
var $last_tag_open  = '<li>';
var $last_tag_close  = '</li>';
var $first_url   = ''; // Alternative URL for the First Page.
var $cur_tag_open  = '<li class="active"><a href="#">';
var $cur_tag_close  = '</a></li>';
var $next_tag_open  = '<li>';
var $next_tag_close  = '</li>';
var $prev_tag_open  = '<li class="prev">';
var $prev_tag_close  = '</li>';
var $num_tag_open  = '<li>';
var $num_tag_close  = '</li>';
var $page_query_string = FALSE;
var $query_string_segment = 'per_page';
var $display_pages  = TRUE;
var $anchor_class  = ''; 

replace variables with $config[‘base_url ‘];, look at following code


$config['base_url']   = ''; // The page we are linking to
$config['prefix']   = ''; // A custom prefix added to the path.
$config['suffix']   = ''; // A custom suffix added to the path.

$config['total_rows']   =  0; // Total number of items (database results)
$config['per_page']   = 10; // Max number of items you want shown per page
$config['num_links']   =  2; // Number of "digit" links to show before/after the currently viewed page
$config['cur_page']   =  0; // The current page being viewed
$config['use_page_numbers']     = FALSE; // Use page number for segment instead of offset
$config['first_link']   = '‹ First';
$config['next_link']   = '&raquo';
$config['prev_link']   = '&laquo';
$config['last_link']   = 'Last ›';
$config['uri_segment']      = 3;
$config['full_tag_open']  = '<ul class="pagination">';
$config['full_tag_close']  = '</ul>';
$config['first_tag_open']  = '<li>';
$config['first_tag_close']     = '</li>';
$config['last_tag_open']  = '<li>';
$config['last_tag_close']  = '</li>';
$config['first_url']   = ''; // Alternative URL for the First Page.
$config['cur_tag_open']      = '<li class="active"><a href="#">';
$config['cur_tag_close']  = '</a></li>';
$config['next_tag_open']  = '<li>';
$config['next_tag_close']  = '</li>';
$config['prev_tag_open']  = '<li class="prev">';
$config['prev_tag_close']  = '</li>';
$config['num_tag_open']      = '<li>';
$config['num_tag_close']  = '</li>';
$config['page_query_string'] = FALSE;
$config['query_string_segment'] = 'per_page';
$config['display_pages']  = TRUE;
$config['anchor_class']      = '';

replace values according to your design.
Have a look at5 following values, i just changed these only. If you want more advance then you can change other values also. Read More official Doc.

codeigniter pagination

That’s it.

Manoj Bist

A Passionate Web Developer/Designer With over 6 years of experience in the industry, Manoj Bist is a seasoned professional who combines technical expertise with a down-to-earth demeanor. As a lover of both technology and design, he thrives on creating seamless digital experiences that captivate and inspire.

Leave a Reply

Your email address will not be published. Required fields are marked *