This tutorial will demonstrate how to make “Pagination in CodeIgniter”. In this post we used CodeIgniter pagination class by initializing pagination library.

Pagination is one concept used for web applications. Wherever we have a bulk of data and need to show them, then it allows you to navigate from page to page, at that time we require pagination. It looks like:

« First  < 1 2 3 4 5 >  Last »

As a robust framework, CodeIgniter provides very efficient way to handle it with its integrated support. In this tutorial, we will see through an example, how we can implement CodeIgniter pagination and enhance it further as per our need.

 


 Watch the live demo or download code from the link given below

 


Syntax:

For initialization codeIgniter pagination library

 // Initialize empty array.
$config = array();

// Set base_url for every links
$config["base_url"] = base_url()."index.php/pagination_controller/contact_info";

// Set total rows in the result set you are creating pagination for.
$config["total_rows"] = $total_row;

// Number of items you intend to show per page.
$config["per_page"] = 1;

// Use pagination number for anchor URL.
$config['use_page_numbers'] = TRUE;

//Set that how many number of pages you want to view.
$config['num_links'] = $total_row;

// Open tag for CURRENT link.
$config['cur_tag_open'] = '&nbsp;<a class="current">';

// Close tag for CURRENT link.
$config['cur_tag_close'] = '</a>';

// By clicking on performing NEXT pagination.
$config['next_link'] = 'Next';

// By clicking on performing PREVIOUS pagination.
$config['prev_link'] = 'Previous';

// To initialize "$config" array and set to pagination library.
$this->pagination->initialize($config);

// Create link.
$this->pagination->create_links();

 


How to run file:

http://localhost/codeigniter_pagination/index.php/pagination_controller/contact_info

 


Tutorial Scripts in detail

Below are the details of the code used in this tutorial with proper explanation.

My SQL code segment

To create database and table, execute following codes in your My SQL . or  in downloaded  model folder info.sql file is there you can also import them

CREATE DATABASE info;
CREATE TABLE contact_info(
id  int(11) NOT NULL AUTO_INCREMENT,
name  varchar(255) NOT NULL,
email  varchar(255) NOT NULL,
mobile_number  int(11) NOT NULL,
country  varchar(255) NOT NULL,
PRIMARY KEY (`id`)
)

 

Controller File : pagination_controller.php

Copy the below code in your controller.

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

class Pagination_Controller extends CI_Controller {

// Load libraries in Constructor.
function __construct() {
parent::__construct();
$this->load->model('pagination_model');
$this->load->library('pagination');
}

// Set array for PAGINATION LIBRARY, and show view data according to page.
public function contact_info(){
$config = array();
$config["base_url"] = base_url() . "index.php/pagination_controller/contact_info";
$total_row = $this->pagination_model->record_count();
$config["total_rows"] = $total_row;
$config["per_page"] = 1;
$config['use_page_numbers'] = TRUE;
$config['num_links'] = $total_row;
$config['cur_tag_open'] = '&nbsp;<a class="current">';
$config['cur_tag_close'] = '</a>';
$config['next_link'] = 'Next';
$config['prev_link'] = 'Previous';

$this->pagination->initialize($config);
if($this->uri->segment(3)){
$page = ($this->uri->segment(3)) ;
}
else{
$page = 1;
}
$data["results"] = $this->pagination_model->fetch_data($config["per_page"], $page);
$str_links = $this->pagination->create_links();
$data["links"] = explode('&nbsp;',$str_links );

// View data according to array.
$this->load->view("pagination_view", $data);
}
}
?>

 

View File:  pagination_view.php

Copy the below code in your view.

<html>
<head>
<title>Codelgniter pagination</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="main">
<div id="content">
<h3 id='form_head'>Codelgniter Pagination Example </h3><br/>
<hr>
<div id="form_input">
<?php

// Show data
foreach ($results as $data) {
echo "<label> Id </label>" . "<div class='input_text'>" . $data->id . "</div>"
. "<label> Name</label> " . "<div class='input_name'>" . $data->name . "</div>"
. "<label> Email </label>" . "<div class='input_email'>" . $data->email . "</div>"
. "<label> Mobile No </label>" . "<div class='input_num'>" . $data->mobile_number . "</div>"
. "<label> Country </label> " . "<div class='input_country'>" . $data->country . "</div>";
}
?>
</div>
<div id="pagination">
<ul class="tsc_pagination">

<!-- Show pagination links -->
<?php foreach ($links as $link) {
echo "<li>". $link."</li>";
} ?>
</div>
</div>
</div>
</body>
</html>

 

Model File : pagination_model.php

Create new class in your model as shown below.

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

class Pagination_Model extends CI_Model {
function __construct() {
parent::__construct();
}
// Count all record of table "contact_info" in database.
public function record_count() {
return $this->db->count_all("contact_info");
}

// Fetch data according to per_page limit.
public function fetch_data($limit, $id) {
$this->db->limit($limit);
$this->db->where('id', $id);
$query = $this->db->get("contact_info");
if ($query->num_rows() > 0) {
foreach ($query->result() as $row) {
$data[] = $row;
}

return $data;
}
return false;
}
}
?>

 

CSS File : style.css

Styling HTML Elements.

body {
font-family: 'Raleway', sans-serif;
}
.main
{
width: 1015px;
position: absolute;
top: 10%;
left: 20%;
}
#form_head
{
text-align: center;
background-color: #61CAFA;
height: 66px;
margin: 0 0 -29px 0;
padding-top: 35px;
border-radius: 8px 8px 0 0;
color: rgb(255, 255, 255);
}
#content {
position: absolute;
width: 450px;
height: 390px;
border: 2px solid gray;
border-radius: 10px;
}
#form_input
{
margin-left: 110px;
margin-top: 30px;
}
label
{
margin-right: 6px;
font-weight: bold;
}
#pagination{
margin: 40 40 0;
}
.input_text {
display: inline;
margin: 100px;
}
.input_name {
display: inline;
margin: 65px;
}
.input_email {
display: inline;
margin-left: 73px;
}
.input_num {
display: inline;
margin: 36px;
}
.input_country {
display: inline;
margin: 53px;
}
ul.tsc_pagination li a
{
border:solid 1px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 9px 6px 9px;
}
ul.tsc_pagination li
{
padding-bottom:1px;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current
{
color:#FFFFFF;
box-shadow:0px 1px #EDEDED;
-moz-box-shadow:0px 1px #EDEDED;
-webkit-box-shadow:0px 1px #EDEDED;
}
ul.tsc_pagination
{
margin:4px 0;
padding:0px;
height:100%;
overflow:hidden;
font:12px 'Tahoma';
list-style-type:none;
}
ul.tsc_pagination li
{
float:left;
margin:0px;
padding:0px;
margin-left:5px;
}
ul.tsc_pagination li a
{
color:black;
display:block;
text-decoration:none;
padding:7px 10px 7px 10px;
}
ul.tsc_pagination li a img
{
border:none;
}
ul.tsc_pagination li a
{
color:#0A7EC5;
border-color:#8DC5E6;
background:#F8FCFF;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current
{
text-shadow:0px 1px #388DBE;
border-color:#3390CA;
background:#58B0E7;
background:-moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
}

 

Conclusion:

Thanks for reading the complete post. Hope you have got the concept. You can share your views in the space provided below and get in touch with us.