CodeIgniter Pagination With Bootstrap

CodeIgniter Pagination With Bootstrap

Most of the time in the web application development, we have to show a large amount of data to the users. To show a large amount of data at once decrease the performance of our web application and we definitely want to avoid such problems in our web application.So at this time pagination plays a vital role to improve the performance of our web application. In this tutorial, we are going to learn how to use CodeIgniter pagination class in our web application. Here we are going to use PHP CodeIgniter framework for our backend and Twitter Bootstrap framework for our front end, So it is necessary to have the basic idea of these two frameworks.

Get Started

Codeigniter is a very famous PHP framework due to his large and easy to use libraries. Codeigniter pagination is one such library which is very helpful if we have to show a large amount of data to the users. Codeigniter pagination library breaks the data into the set of numbered links which allows us to navigate from one page to another.

Setting Database for CodeIgniter pagination

Here we use a simple database for the example purpose so that we can see how CodeIgniter pagination library works. Copy the below SQL query and run this to make a simple database of users.

CREATE TABLE `users` (  `user_id` int(11) NOT NULL AUTO_INCREMENT,  `user_name` varchar(256) NOT NULL,  `user_email` varchar(256) NOT NULL,  `create_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,PRIMARY KEY (`user_id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Now We have our table, let’s insert some dummy data into this table. Run the below query to insert data into this table.

INSERT INTO `users` (`user_id`, `user_name`, `user_email`, `create_date`) VALUES(1, 'John', 'john@gmail.com', '2017-07-20 16:22:27'),(2, 'Doe', 'doe@gmail.com', '2017-07-20 16:22:27'),(3, 'Sam', 'sam@gmail.com', '2017-07-20 16:25:35'),(4, 'Sara', 'sara@gmail.com', '2017-07-20 16:25:35'),(5, 'Sam', 'sam@gmail.com', '2017-07-20 16:25:35'),(6, 'Sara', 'sara@gmail.com', '2017-07-20 16:25:35'),(7, 'Adam', 'adam@gmail.com', '2017-07-20 16:25:35'),(8, 'Smith', 'smith@gmail.com', '2017-07-20 16:25:35'),(9, 'Ram', 'ram@gmail.com', '2017-07-20 16:25:35'),(10, 'Mohan', 'mohan@gmail.com', '2017-07-20 16:25:35'),(11, 'John', 'john@gmail.com', '2017-07-20 16:25:35'),(12, 'Ahmad', 'ahmad@gmail.com', '2017-07-20 16:25:35'),(13, 'Jorge', 'jorge@gmail.com', '2017-07-20 16:25:35'),(14, 'Ke', 'Ke@gmail.com', '2017-07-20 16:25:35'),(15, 'Xui', 'xui@gmail.com', '2017-07-20 16:25:35');

Till now we have setup our database, now it’s time to proceed further to understand the logic behind the CodeIgniter pagination library.

Frontend To Integrate Bootstrap with our CodeIgniter Pagination

Create a view file in the view folder of CodeIgniter to integrate bootstrap.Here we use bootstrap to customise the generated links from CodeIgniter pagination library.

<!DOCTYPE html>
<html lang="en">
    <head> 
        <title>Pagination Demo | CodesQuery</title> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">    
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <!--bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
        BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="wrapper"> 
            <div class="container" style="margin: 100px;"> 
                <div class="row"> 
                    <div class="pagination_demo text-center"> 
                        <h4>Pagination Demo | CodesQuery</h4> 
                        <hr> 
                        <table class="table table-bordered table-hover table-responsive paginated"> 
                            <thead> 
                                <tr> 
                                    <th class="text-center"> S.No. </th> 
                                    <th class="text-center"> Name  </th> 
                                    <th class="text-center"> Email </th> 
                                </tr> 
                            </thead> 
                            <tbody> 
                                <?php $sn= 1; foreach($users as $value) { ?> 
                                     <tr> 
                                         <td> <?php echo $sn;                  ?></td> 
                                         <td> <?php echo $value['user_name'];  ?></td> 
                                         <td> <?php echo $value['user_email']; ?></td> 
                                     </tr> 
                                 <?php $sn++; }  ?> 
                             </tbody> 
                         </table> 
                         <div class="pagination_links"> 
                             <?php echo $links; ?> </div> 
                         </div> 
                     </div> 
                 </div> 
             </div>
         </div>
         <!-- Latest compiled and minified JavaScript -->
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
         Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
         </script>
      </body>
</html>

In the above code, we use the CDN provided by the bootstrap to integrate it into our web application.Above code will looks like this at the end of this tutorial.

Backend for CodeIgniter pagination

The controller

Make a controller file and load the pagination library in the constructor and the write an index method in which we will write all our code for the CodeIgniter pagination using the bootstrap framework. I will recommend that do not copy the code and just paste it into the controller. Try to first understand it and then write it by yourself.

<?phpdefined('BASEPATH') OR exit('No direct script access allowed');
class Pagination extends CI_Controller {
    function __Construct(){ 
        parent::__Construct(); 
        $this->load->database();
        //load helper 
        $this->load->helper('url');
        //load model 
        $this->load->model('user_model');
        //load library 
        $this->load->library('pagination');    
    }
    
    public function index(){
        $config['base_url'] = base_url().'pagination/index';        
        $config['total_rows'] = $this->user_model->count_all_users();        
        $config['per_page'] = 5;        
        $config['uri_segment'] = 3;        
        $config['full_tag_open'] = '<ul class="pagination">';        
        $config['full_tag_close'] = '</ul>';        
        $config['first_link'] = 'First';        
        $config['last_link'] = 'Last';        
        $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>';
        
        $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
        $this->pagination->initialize($config);        
        $data['links'] = $this->pagination->create_links();        
        $data['users'] = $this->user_model->get_users($config["per_page"], $page);        
        $this->load->view('pagination_demo',$data);    
    }
}

Here we use the $config array to tell the CodeIgniter the behaviour of pagination library. Here we use bootstrap pagination class to show the links in the bootstrap pagination format and active class to tell the users what is the currently active link. Apart from this, we use a model user_model to fetch our data from the database and CodeIgniter pagination library create_links function to create the link for our data. Below is the meaning of some of the term we used above:

per_page: It is used to tell the CodeIgniter the number of how many entries will be shown on each page.
base_url: It is used to tell the paginated URL base to the CodeIgniter pagination library.
total_rows: Total number of entries in our database.

The Model

Create a model file to fetch the data from the database.If you are familiar with the CodeIgniter framework the below code is very easy to understand.

<?phpdefined('BASEPATH') OR exit('No direct script access allowed');
class User_model extends CI_Model{ 
    
    private function _get_users_data(){ 
        $this->db->select('*'); 
        $this->db->from('users'); 
    }
    
    public function get_users($limit, $start){ 
        $this->_get_users_data(); 
        $this->db->limit($limit, $start); 
        $query = $this->db->get(); 
        return $query->result_array(); 
    }
    
    public function count_all_users(){ 
        $this->_get_users_data(); 
        $query = $this->db->count_all_results(); 
        return $query; 
    }
}

Summary

Now you know how to use the CodeIgniter pagination configuration using the bootstrap framework. You can learn other configuration option from CodeIgniter official docs. It is always a good practice to first check the official documentation of anything which you are going to work.

Hope You loved this tutorial if you have any query, suggestion or anything then comment below. We will get back to you as soon as possible.

Comments

Evincedev30 May 2022 at 11:21
asp net core development company is a restructure of the .NET framework with MVC architectural changes that has multiple advantages like skills to use Gulp, Bower, and Yeoman that can be built by using a variety of text editors like Atom, Sublime text, Visual Studio and more.
Evincedev30 May 2022 at 11:22
Angular JS development is a one-stop solution to all your front-end development requirements to align your business goals with higher ROI and better performance. Check angularjs development services
Evincedev30 May 2022 at 11:24
When it comes to react native app development company Evincedev push digital transformation across the enterprise by harnessing the power of the React Native platform.

Developers Study Center

Search This Blog