Use Pagination Library with Active Record in CodeIgniter Framework


Create new database named learn_codeigniter_with_real_apps. This database have 1 table: Product table.

--
-- Table structure for table `product`
--

CREATE TABLE `product` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(250) NOT NULL,
  `price` double NOT NULL,
  `quantity` int(11) NOT NULL,
  `description` text NOT NULL,
  `status` tinyint(1) NOT NULL,
  `photo` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Dumping data for table `product`
--

INSERT INTO `product` (`name`, `price`, `quantity`, `description`, `status`, `photo) VALUES('name 1', 2, 5, 'Description 1', 0, 'thumb1.gif');
INSERT INTO `product` (`name`, `price`, `quantity`, `description`, `status`, `photo) VALUES('name 2', 7, 3, 'Description 2', 1, 'thumb2.gif');
INSERT INTO `product` (`name`, `price`, `quantity`, `description`, `status`, `photo) VALUES('name 3', 2, 7, 'Description 3', 1, 'thumb3.gif');
INSERT INTO `product` (`name`, `price`, `quantity`, `description`, `status`, `photo) VALUES('name 4', 3, 8, 'Description 4', 1, 'thumb1.gif');
INSERT INTO `product` (`name`, `price`, `quantity`, `description`, `status`, `photo) VALUES('name 5', 8, 2, 'Description 5', 1, 'thumb2.gif');
INSERT INTO `product` (`name`, `price`, `quantity`, `description`, `status`, `photo) VALUES('name 6', 9, 11, 'Description 6', 1, 'thumb3.gif');

Structure of Product Table

Data of Product Table




Create new folder named assets in root project. In this folder, create new folders as below:

Create new folder named images in assets folder. Copy images need to use in project to images folder.

Create new folder named css in assets folder. In this folder, create new css file named style.css as below:

#pagination {
	margin: 40 40 0;
}

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));
}

In CodeIgniter Project, Open config.php file in config folder. Set value for base_url config as below:

$config['base_url'] = 'http://localhost:9092/LearnCodeIgniterWithRealApps/';




In CodeIgniter Project, Open autoload.php file in config folder. Add database and pagination libraries to libraries config as below:

$autoload['libraries'] = array('database', 'pagination');

In CodeIgniter Project, Open autoload.php file in config folder. Add url helper to helper config as below:

$autoload['helper'] = array('url');

In CodeIgniter Project, Open database.php file in config folder. Add values as below connect to database:

$db['default'] = array(
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '123456',
	'database' => 'learn_codeigniter_with_real_apps'
);

Create new PHP file named product_model.php in models folder as below:

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

class Product_model extends CI_Model
{

    function findAll()
    {
        return $this->db->get('product')->result();
    }

    function findByLimit($limit, $row)
    {
        $query = $this->db->get('product', $limit, $row);
        if ($query->num_rows() > 0) {
            return $query->result();
        }
        return NULL;
    }
}

In CodeIgniter Project, Open autoload.php file in config folder and set value for model config as below:

$autoload['model'] = array('product_model' => 'productModel');




Create new PHP file named product.php in controllers folder as below:

<?php

defined('BASEPATH') or exit('No direct script access allowed');

class Product extends CI_Controller
{

    public function index($index = 0)
    {
        $config['base_url'] = site_url('product/index');
        $config['total_rows'] = count($this->productModel->findAll());
        $config['per_page'] = '2';

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

        $this->pagination->initialize($config);
        $data['products'] = $this->productModel->findByLimit(2, $index);
        $data['links'] = $this->pagination->create_links();
        $this->load->view('product/index', $data);
    }

}

In CodeIgniter Project, Open routes.php file in config folder. Set value for default_controller as below:

$route['default_controller'] = 'product';

Create new folder named product in views folder. In this folder, create new PHP file named index.php as below:

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<html>
	<head>
		<title>Product List</title>
		<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<h3>Product List</h3>
        <table border="1" cellpadding="2" cellspacing="2">
        	<tr>
        		<th>Id</th>
        		<th>Name</th>
        		<th>Photo</th>
        		<th>Status</th>
        		<th>Description</th>
        		<th>Price</th>
        		<th>Quantity</th>
        		<th>Sub Total</th>
        	</tr>
        	<?php foreach ($products as $product) { ?>
        		<tr>
        			<td><?php echo $product->id; ?></td>
        			<td><?php echo $product->name; ?></td>
        			<td><img src="<?php echo base_url(); ?>assets/images/<?php echo $product->photo; ?>" width="50"></td>
        			<td><?php echo $product->status ? 'active' : 'inactive'; ?></td>
        			<td><?php echo $product->description; ?></td>
        			<td><?php echo $product->price; ?></td>
        			<td><?php echo $product->quantity; ?></td>
        			<td><?php echo $product->price * $product->quantity; ?></td>
        		</tr>
        	<?php } ?>
        	<tr>
        		<td colspan="8" align="center">
        			<?php echo $links; ?>
        		</td>
        	</tr>
        </table>
	</body>
</html>




Access index action in Demo controller with following url: http://localhost:9092/LearnCodeIgniterWithRealApps/product/index

Output

I recommend you refer to the books below to learn more about the knowledge in this article: