CodeIgniter Pagination With Bootstrap
Get Started
Setting Database for CodeIgniter pagination
- 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;
- 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');
Frontend To Integrate Bootstrap with our CodeIgniter Pagination
- <!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>
Backend for CodeIgniter pagination
The controller
- <?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'] = '«';
- $config['prev_tag_open'] = '<li class="prev">';
- $config['prev_tag_close'] = '</li>';
- $config['next_link'] = '»';
- $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);
- }
- }
- 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
- <?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;
- }
- }
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.
ReplyDeleteAngular 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
ReplyDeleteWhen it comes to react native app development company Evincedev push digital transformation across the enterprise by harnessing the power of the React Native platform.
ReplyDelete