Making Simple Pagination with CodeIgniter Framework and Bootstrap

Introduction

Pagination is a feature that is used to restrict the display of the data that is not too long and neater. As seen in the illustration on the front of this article. Use pagination commonly used to display large amounts of data, so it can be separated / selected how the data will be shown first.

For those who use the CodeIgniter  framework, it is not too difficult to apply the existing library in CodeIgniter  pagination, the way was clear enough what when viewed on an existing local user.

To Learn About:

For CodeIgniter Basic: http://www.w3programmers.com/introduction-to-codeigniter-basic-with-crud/

For Database : http://www.w3programmers.com/an-introduction-to-codeigniter-database/

For Helper and Libraries: http://www.w3programmers.com/an-overview-of-codeigniter-helper-and-libraries/

Setting Database Configuration

Please, open database.php within codeigniter\application\config. Set config like below:

Preparing Database

We will learn about showing data from database in CodeIgniter. But, before that, we prepare a database for practice. This post create a database named “ci_test” and a table named “users”. We use phpMyAdmin for easy.

1. Open your phpmyadmin.
2. Enter database name “student” in create new database field.
3. Click Create button. Your database will be created.
4. Create new table by running this query in your sql window:

CREATE TABLE IF NOT EXISTS `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(50) CHARACTER SET latin1 NOT NULL,

`email` varchar(150) CHARACTER SET latin1 NOT NULL,

`mobile` varchar(20) CHARACTER SET latin1 NOT NULL,

`address` varchar(255) CHARACTER SET latin1 NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=60 ;

Insert some sample data to your users table by running this query in your sql window:

INSERT INTO `users` (`id`, `name`, `email`, `mobile`, `address`) VALUES

(1, 'Al-Amin Khan', 'al@min.com', '6546464', 'Dhaka,Bangladesh'),

(2, 'Sahed Bhuiyan', 's@hed.com', '987979', 'Khulna, Bangladesh'),

(3, 'Mamun', 'm@mun.com', '646465', 'Bikrom Pur'),

(9, 'foysal1', 'foysal@yahoo.com', '1234556', 'Dhaka, Bangladesh.'),

(36, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(37, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(38, 'sd', 'ADSa', 'asdAD', 'Adsas'),

(39, 'Al-Amin Khan', 'al@min.com', '6546464', 'Dhaka,Bangladesh'),

(40, 'Sahed Bhuiyan', 's@hed.com', '987979', 'Khulna, Bangladesh'),

(41, 'Mamun', 'm@mun.com', '646465', 'Bikrom Pur'),

(42, 'foysal1', 'foysal@yahoo.com', '1234556', 'Dhaka, Bangladesh.'),

(43, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(44, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(45, 'sd', 'ADSa', 'asdAD', 'Adsas'),

(46, 'Al-Amin Khan', 'al@min.com', '6546464', 'Dhaka,Bangladesh'),

(47, 'Sahed Bhuiyan', 's@hed.com', '987979', 'Khulna, Bangladesh'),

(48, 'Mamun', 'm@mun.com', '646465', 'Bikrom Pur'),

(49, 'foysal1', 'foysal@yahoo.com', '1234556', 'Dhaka, Bangladesh.'),

(50, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(51, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(52, 'sd', 'ADSa', 'asdAD', 'Adsas'),

(53, 'Al-Amin Khan', 'al@min.com', '6546464', 'Dhaka,Bangladesh'),

(54, 'Sahed Bhuiyan', 's@hed.com', '987979', 'Khulna, Bangladesh'),

(55, 'Mamun', 'm@mun.com', '646465', 'Bikrom Pur'),

(56, 'foysal1', 'foysal@yahoo.com', '1234556', 'Dhaka, Bangladesh.'),

(57, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(58, 'Masdu', 'masud.eden@gmail.com', '0432324', 'Dhaka,Bangladesh'),

(59, 'sd', 'ADSa', 'asdAD', 'Adsas');

In the controller we added code to access library databases and table pagination and url form and links. The following syntax:

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

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

$this->load->helper('form');

$this->load->helper('url');

$this->load->database(); //load library database

Then we configure for pagination settings to be made like the code below:

$config['base_url'] = base_url().'index.php/welcome/index';

$config['total_rows'] = 5;

$config['per_page'] = 2;

$config['num_links'] = 5;

$config['use_page_numbers'] = TRUE;

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

Next is the code to retrieve data from the database and displayed according to the offset and the prescribed rules per page. Do not forget to set its table used to display the data before

$data['records']=$this->db->get('users', $config['per_page'],$offset);// take record of the table
$header = array('Id', 'Name','Email','Mobile','Address'); // create table header
$this->table->set_heading($header);// apply a heading with a header that was created
$this->load->view('welcome_message',$data); // load content view with data taken from the users table

Script snippet above, combined into a single function that I give the name of the index, the offset parameter. In application/controller so that we become as follows:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller{
 function __construct(){
 parent::__construct();
 }

function index($offset = 0){
 $this->load->library('table');
 $this->load->library('pagination');
 $this->load->helper('form');
 $this->load->helper('url');
 $this->load->database(); //load library database

// Config setup
$num_rows=$this->db->count_all("users");
 $config['base_url'] = base_url().'index.php/welcome/index';
 $config['total_rows'] = $num_rows;
 $config['per_page'] = 5;
 $config['num_links'] = $num_rows;
 $config['use_page_numbers'] = TRUE;
 $this->pagination->initialize($config);

$data['records']=$this->db->get('users', $config['per_page'],$offset);// take record of the table
$header = array('Id', 'Name','Email','Mobile','Address'); // create table header
$this->table->set_heading($header);// apply a heading with a header that was created
$this->load->view('welcome_message',$data); // load content view with data taken from the users table
 }

}

Now create welcome_message.php file in our application/view to show its pagination links

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Welcome to CodeIgniter Pagination System</title>

</head>
<body>

<div id="container">
 <h1>Welcome to CodeIgniter Pagination System!</h1>

<div id="body">

 <?php echo $this->table->generate($records); ?>
 <?php echo $this->pagination->create_links(); ?>
 </div>

<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>

Now See Your Student List With Pagination:

It’s not sexy, right? Ok guys don’t worry, keep in touch…. Just Go http://getbootstrap.com/ and click the download button as seen as below: Now place “dist”  folder from your Bootstrap 3.0 Folder to your codeigniter folder as like below: Update your view file welcome_message.php from application/views as seen as below:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Welcome to CodeIgniter Pagination System</title>
 <link href="<?php echo base_url(); ?>/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
 <script src="<?php echo base_url();?>/dist/js/bootstrap.min.js" type="text/javascript" language="javascript"></script>

</head>
<body>

<div id="container">
 <h1>Welcome to CodeIgniter Pagination System!</h1>

<div id="body">

 <?php echo $this->table->generate($records); ?>
 <?php echo $this->pagination->create_links(); ?>
 </div>

<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>

Above Code, We just add our bootstrap css and js file from dist folder. Then Finally We Update Our controller file from application/controller/welcome.php file as seen below:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller{
 function __construct(){
 parent::__construct();
 }

function index($offset = 0){
 $this->load->library('table');
 $this->load->library('pagination');
 $this->load->helper('form');
 $this->load->helper('url');
 $this->load->database(); //load library database

// Config setup
$num_rows=$this->db->count_all("users");
 $config['base_url'] = base_url().'index.php/welcome/index';
 $config['total_rows'] = $num_rows;
 $config['per_page'] = 5;
 $config['num_links'] = $num_rows;
 $config['use_page_numbers'] = TRUE;
 $config['full_tag_open'] = '<ul class="pagination">';
 $config['full_tag_close'] = '</ul>';
 $config['prev_link'] = '&laquo;';
 $config['prev_tag_open'] = '<li>';
 $config['prev_tag_close'] = '</li>';
 $config['next_tag_open'] = '<li>';
 $config['next_tag_close'] = '</li>';
 $config['cur_tag_open'] = '<li class="active"><a href="#">';
 $config['cur_tag_close'] = '</a></li>';
 $config['num_tag_open'] = '<li>';
 $config['num_tag_close'] = '</li>';

$config['next_link'] = '&raquo;';

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

$data['records']=$this->db->get('users', $config['per_page'],$offset);// take record of the table
$header = array('Id', 'Name','Email','Mobile','Address'); // create table header
$tmpl = array ( 'table_open' => '<table class="table table-bordered table-striped table-condensed">' );

$this->table->set_template($tmpl);
$this->table->set_heading($header);// apply a heading with a header that was created
$this->load->view('welcome_message',$data); // load content view with data taken from the daily table
 }

}

See Below Your Final Output:

Huh!..GoodGood VeryGood…:D

Download

Masud Alam

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I’m a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, Canadian International Development Agency (CIDA), World Vision, Care Bangladesh, Helen Keller, US AID and MAX Group where I worked on ERP software and web development., but now i’m a founder and CEO of TechBeeo Software Company Ltd. I’m also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute – a leading Training Institute in the country.