Sunday, 20 March 2016

Pagination with CodeIgniter and Bootstrap


Pagination in CodeIgniter with use of codeigniter pagination library and bootstrap

Step 1 : create a file in your CodeIgniter controller folder.
home.php

<?php
class Home extends CI_Controller {
    function __construct() {

        parent::__construct();

        $this->load->model('Citymodel');

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

    }
    public function pagination($Starting=0) {
        $config['base_url'] = base_url().'Home/pagination/';
        $TotalRows = $this->Citymodel->record_count();
        $config['total_rows'] = $TotalRows;
        $config['per_page'] = 6; 
        $config['num_links'] = 5;
        $TotalRecord = $config['per_page'];
        $config['full_tag_open'] = '<ul class="pagination">';
        $config['full_tag_close'] = '</ul>';
        $config['first_link'] = false;
        $config['last_link'] = false;
        $config['first_tag_open'] = '<li>';
        $config['first_tag_close'] = '</li>';
        $config['prev_link'] = '&laquo';
        $config['prev_tag_open'] = '<li class="prev">';
        $config['prev_tag_close'] = '</li>';
        $config['next_link'] = '&raquo';
        $config['next_tag_open'] = '<li>';
        $config['next_tag_close'] = '</li>';
        $config['last_tag_open'] = '<li>';
        $config['last_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>';
        $this->pagination->initialize($config); 
        $data['Links'] = $this->pagination->create_links();
        $data['result'] = $this->Citymodel->fetch_data($Starting,$TotalRecord);
        $this->load->view('pagination',$data);
    }
}
?>

Step 2 : Create a file in model folder of CodeIgniter.
Citymodel.php

<?php
if (!defined('BASEPATH'))
    exit('No direct script access allowed');
class Citymodel extends CI_Model {
    function __construct() {
        parent::__construct();
    }
    public function record_count() {
        return $this->db->count_all("area");
    }
    public function fetch_data($Starting,$TotalRecord) {
        $query = $this->db->query("select * from area limit $Starting,$TotalRecord");
        if ($query->num_rows() > 0) {
            foreach ($query->result() as $row) {
                $data[] = $row;
            }
            return $data;
        }
        return false;
    }
}
?>

Step 3 : create file in view folder for display records of database
pagination.php

<html>
    <head>
        <title>Codelgniter pagination</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
    </head>
    <body>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h2 class="text-info">User List</h2>
                <table class="table table-hover">
                    <tbody>
                        <tr>
                            <th>Area Name</th>
                            <th>City</th>
                        </tr>
                     <?php
                        // Show data
                        foreach ($result as $result) {
                     ?>
                            <tr>
                                <td><?php echo $result->AreaName ?></td>
                                <td><?php echo "Ahmedabad" ?></td>
                            </tr>
                    <?php } ?>
                    </tbody>
                </table>
                    <?php echo $Links; ?>
            </div>
        </div>
    </body>
</html>

Step 4 : create database and add this table data 
table name - area

CREATE TABLE `area` (`id` int(11) NOT NULL,`AreaName` varchar(100) NOT NULL)
INSERT INTO `area` (`id`, `AreaName`) VALUES (14, 'Bapu Nagar'),(18, 'Prahlad Nagar'),(19, 'C.G. Road'),(20, 'S.G. Road'),(21, 'Navrangpura'),(22, 'Vastrapur'),(23, 'Ashram Road'),(24, 'Paldi'),(25, 'Saraspur'),(26, 'Satellite Area'),(27, 'Sarangpur Darwaza'),(28,'Ambawadi'),(29, 'Ellis Bridge'),(30, 'Ghatlodia'),(31, 'Gulbai Tekra'),(32, 'Gita Mandir Road')(33, 'Mem Nagar'),(34, 'Naranpura'),(35, 'University Area');


NOTE : base url must be like = 'localhost/CodeIgniteProjectName/Home/pagination'

Related Articles

0 comments:

Post a Comment

Prompt Web Solution. Powered by Blogger.