Halloween Costume ideas 2015

A News portal by Websoft IT Nepal Pvt. ltd.

PLEASE BOOKMARK US BY PRESS CTRL+D बूक्मार्क गर्न CTRL+D थिच्नुहोस् 

PHP CodeIgniter Pagination with Twitter Bootstrap Styles - Example

PHP Codeigniter framework provides a good number of libraries required for building a website with codeigniter and pagination library is one among them. For those who are not familiar with the term pagination, this refers to the set of numbered links that allows you to navigate from page to page to view a large set of data. For example let's say you want to fetch and display some data from database and it contains several hundreds of records. In that case pagination will be very useful to display the database resultset in chunks and let the user to skim through several page links (similar to google search results).
However the pagination links in codeigniter are plain looking in nature and a little customization to codeigniter pagination doesn't hurt. Here we'll see in this tutorial, how to style codeigniter pagination links with twitter bootstrap styles.

Implement Twitter Bootstrap Styles in CodeIgniter Pagination

We'll see an example below to fetch and display the list of department names and their department head in a neat table view along with pagination links at the bottom.

MySQL Database Example

As an example I'll use this below 'employee' database for this tutorial.
-- Database: `employee`
  `int_id` int(4) NOT NULL AUTO_INCREMENT,
  `var_dept_name` varchar(50) NOT NULL,
  `int_hod` int(5) NOT NULL,
  KEY `int_id` (`int_id`)

  `int_id` int(5) NOT NULL AUTO_INCREMENT,
  `var_emp_name` varchar(50) NOT NULL,
  `int_dept_id` int(4) NOT NULL,
  PRIMARY KEY (`int_id`)

The Model ('models/department_model.php')

First we create a model file with a method to fetch and return the entire department details along with the head of the department employee name.
class department_model extends CI_Model{
    function __construct()
        // Call the Model constructor

    //fetch department details from database
    function get_department_list($limit, $start)
        $sql = 'select var_dept_name, var_emp_name from tbl_dept, tbl_emp where tbl_dept.int_hod = tbl_emp.int_id order by var_dept_name limit ' . $start . ', ' . $limit;
        $query = $this->db->query($sql);
        return $query->result();

The Controller ('controllers/department.php')

Next create the controller file and load the codeigniter pagination library and the department model file which we created earlier in the constructor method. Then create the index() function where we configure the behavior of the pagination library with the $config[] array and create the pagination links to be displayed at the bottom of the department table in the view file.
class department extends CI_Controller
    public function __construct()

        //load the department_model

    public function index()
        //pagination settings
        $config['base_url'] = site_url('department/index');
        $config['total_rows'] = $this->db->count_all('tbl_dept');
        $config['per_page'] = "5";
        $config["uri_segment"] = 3;
        $choice = $config["total_rows"] / $config["per_page"];
        $config["num_links"] = floor($choice);

        //config for bootstrap pagination class integration
        $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>';

        $data['page'] = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;

        //call the model function to get the department data
        $data['deptlist'] = $this->department_model->get_department_list($config["per_page"], $data['page']);           

        $data['pagination'] = $this->pagination->create_links();

        //load the department_view
As you can see in the above code, we have integrated bootstrap's '.pagination' class to codeigniter pagination links. Using the '.active' css class will highlight the active page in the links.

The View ('views/department_view.php')

Finally create view file to display the department list in a neat striped table with bootstrap pagination links at the bottom.
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP CodeIgniter Pagination with Bootstrap Styles | Example</title>
    <!--link the bootstrap css file-->
    <link rel="stylesheet" href="<?php echo base_url("bootstrap/css/bootstrap.css"); ?>">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-hover">
                        <th>Department Name</th>
                        <th>Head of Department</th>
                    <?php for ($i = 0; $i < count($deptlist); ++$i) { ?>
                        <td><?php echo ($page+$i+1); ?></td>
                        <td><?php echo $deptlist[$i]->var_dept_name; ?></td>
                        <td><?php echo $deptlist[$i]->var_emp_name; ?></td>
                    <?php } ?>
    <div class="row">
        <div class="col-md-12 text-center">
            <?php echo $pagination; ?>
We have used bootstrap table styles such as '.table''.table-striped''.table-hover' to display the department list in a neat format and at the bottom with pagination links.
Open the controller in the browser and you get the department details displayed like this.

Post a Comment



Contact Form


Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget