আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

Making Simple Pagination with CodeIgniter Framework and Bootstrap

Introduction

Pagination is a feature that is used to restrict the display of the data that is not too long and neater. As seen in the illustration on the front of this article. Use pagination commonly used to display large amounts of data, so it can be separated / selected how the data will be shown first.

For those who use the CodeIgniter  framework, it is not too difficult to apply the existing library in CodeIgniter  pagination, the way was clear enough what when viewed on an existing local user.

To Learn About:

For CodeIgniter Basic: http://www.w3programmers.com/introduction-to-codeigniter-basic-with-crud/

For Database : http://www.w3programmers.com/an-introduction-to-codeigniter-database/

For Helper and Libraries: http://www.w3programmers.com/an-overview-of-codeigniter-helper-and-libraries/

Setting Database Configuration

Please, open database.php within codeigniter\application\config. Set config like below:

CodeIgniter database configuration

Preparing Database

We will learn about showing data from database in CodeIgniter. But, before that, we prepare a database for practice. This post create a database named “ci_test” and a table named “users”. We use phpMyAdmin for easy.

  1. Open your phpmyadmin.
  2. Enter database name “student” in create new database field.
  3. Click Create button. Your database will be created.
  4. Create new table by running this query in your sql window:
CREATE TABLE IF NOT EXISTS `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(50) CHARACTER SET latin1 NOT NULL,

`email` varchar(150) CHARACTER SET latin1 NOT NULL,

`mobile` varchar(20) CHARACTER SET latin1 NOT NULL,

`address` varchar(255) CHARACTER SET latin1 NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=60 ;

Insert some sample data to your users table by running this query in your sql window:

INSERT INTO `users` (`id`, `name`, `email`, `mobile`, `address`) VALUES

(1, 'Al-Amin Khan', '[email protected]', '6546464', 'Dhaka,Bangladesh'),

(2, 'Sahed Bhuiyan', '[email protected]', '987979', 'Khulna, Bangladesh'),

(3, 'Mamun', '[email protected]', '646465', 'Bikrom Pur'),

(9, 'foysal1', '[email protected]', '1234556', 'Dhaka, Bangladesh.'),

(36, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(37, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(38, 'sd', 'ADSa', 'asdAD', 'Adsas'),

(39, 'Al-Amin Khan', '[email protected]', '6546464', 'Dhaka,Bangladesh'),

(40, 'Sahed Bhuiyan', '[email protected]', '987979', 'Khulna, Bangladesh'),

(41, 'Mamun', '[email protected]', '646465', 'Bikrom Pur'),

(42, 'foysal1', '[email protected]', '1234556', 'Dhaka, Bangladesh.'),

(43, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(44, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(45, 'sd', 'ADSa', 'asdAD', 'Adsas'),

(46, 'Al-Amin Khan', '[email protected]', '6546464', 'Dhaka,Bangladesh'),

(47, 'Sahed Bhuiyan', '[email protected]', '987979', 'Khulna, Bangladesh'),

(48, 'Mamun', '[email protected]', '646465', 'Bikrom Pur'),

(49, 'foysal1', '[email protected]', '1234556', 'Dhaka, Bangladesh.'),

(50, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(51, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(52, 'sd', 'ADSa', 'asdAD', 'Adsas'),

(53, 'Al-Amin Khan', '[email protected]', '6546464', 'Dhaka,Bangladesh'),

(54, 'Sahed Bhuiyan', '[email protected]', '987979', 'Khulna, Bangladesh'),

(55, 'Mamun', '[email protected]', '646465', 'Bikrom Pur'),

(56, 'foysal1', '[email protected]', '1234556', 'Dhaka, Bangladesh.'),

(57, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(58, 'Masdu', '[email protected]', '0432324', 'Dhaka,Bangladesh'),

(59, 'sd', 'ADSa', 'asdAD', 'Adsas');

In the controller we added code to access library databases and table pagination and url form and links. The following syntax:

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

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

$this->load->helper('form');

$this->load->helper('url');

$this->load->database(); //load library database

Then we configure for pagination settings to be made like the code below:

$config['base_url'] = base_url().'index.php/welcome/index';

$config['total_rows'] = 5;

$config['per_page'] = 2;

$config['num_links'] = 5;

$config['use_page_numbers'] = TRUE;

$this->pagination->initialize($config);

Next is the code to retrieve data from the database and displayed according to the offset and the prescribed rules per page. Do not forget to set its table used to display the data before

$data['records']=$this->db->get('users', $config['per_page'],$offset);// take record of the table
$header = array('Id', 'Name','Email','Mobile','Address'); // create table header
$this->table->set_heading($header);// apply a heading with a header that was created
$this->load->view('welcome_message',$data); // load content view with data taken from the users table


Script snippet above, combined into a single function that I give the name of the index, the offset parameter. In application/controller so that we become as follows:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller{
 function __construct(){
 parent::__construct();
 }

function index($offset = 0){
 $this->load->library('table');
 $this->load->library('pagination');
 $this->load->helper('form');
 $this->load->helper('url');
 $this->load->database(); //load library database

// Config setup
$num_rows=$this->db->count_all("users");
 $config['base_url'] = base_url().'index.php/welcome/index';
 $config['total_rows'] = $num_rows;
 $config['per_page'] = 5;
 $config['num_links'] = $num_rows;
 $config['use_page_numbers'] = TRUE;
 $this->pagination->initialize($config);

$data['records']=$this->db->get('users', $config['per_page'],$offset);// take record of the table
$header = array('Id', 'Name','Email','Mobile','Address'); // create table header
$this->table->set_heading($header);// apply a heading with a header that was created
$this->load->view('welcome_message',$data); // load content view with data taken from the users table
 }

}

Now create welcome_message.php file in our application/view to show its pagination links

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Welcome to CodeIgniter Pagination System</title>

</head>
<body>

<div id="container">
 <h1>Welcome to CodeIgniter Pagination System!</h1>

<div id="body">

 <?php echo $this->table->generate($records); ?>
 <?php echo $this->pagination->create_links(); ?>
 </div>

<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>

Now See Your Student List With Pagination:

CodeIgniter Pagination Result It’s not sexy, right? Ok guys don’t worry, keep in touch…. Just Go http://getbootstrap.com/ and click the download button as seen as below: Twitter Bootstrap 3.0 Download Now place “dist”  folder from your Bootstrap 3.0 Folder to your codeigniter folder as like below: CodeIgniter Folder Structure Update your view file welcome_message.php from application/views as seen as below:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Welcome to CodeIgniter Pagination System</title>
 <link href="<?php echo base_url(); ?>/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
 <script src="<?php echo base_url();?>/dist/js/bootstrap.min.js" type="text/javascript" language="javascript"></script>

</head>
<body>

<div id="container">
 <h1>Welcome to CodeIgniter Pagination System!</h1>

<div id="body">

 <?php echo $this->table->generate($records); ?>
 <?php echo $this->pagination->create_links(); ?>
 </div>

<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>

Above Code, We just add our bootstrap css and js file from dist folder. Then Finally We Update Our controller file from application/controller/welcome.php file as seen below:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller{
 function __construct(){
 parent::__construct();
 }

function index($offset = 0){
 $this->load->library('table');
 $this->load->library('pagination');
 $this->load->helper('form');
 $this->load->helper('url');
 $this->load->database(); //load library database

// Config setup
$num_rows=$this->db->count_all("users");
 $config['base_url'] = base_url().'index.php/welcome/index';
 $config['total_rows'] = $num_rows;
 $config['per_page'] = 5;
 $config['num_links'] = $num_rows;
 $config['use_page_numbers'] = TRUE;
 $config['full_tag_open'] = '<ul class="pagination">';
 $config['full_tag_close'] = '</ul>';
 $config['prev_link'] = '&laquo;';
 $config['prev_tag_open'] = '<li>';
 $config['prev_tag_close'] = '</li>';
 $config['next_tag_open'] = '<li>';
 $config['next_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>';

$config['next_link'] = '&raquo;';

 $this->pagination->initialize($config);

$data['records']=$this->db->get('users', $config['per_page'],$offset);// take record of the table
$header = array('Id', 'Name','Email','Mobile','Address'); // create table header
$tmpl = array ( 'table_open' => '<table class="table table-bordered table-striped table-condensed">' );

$this->table->set_template($tmpl);
$this->table->set_heading($header);// apply a heading with a header that was created
$this->load->view('welcome_message',$data); // load content view with data taken from the daily table
 }

}

See Below Your Final Output:

Twitter Bootstrap Pagination With CodeIgniterHuh!..GoodGood VeryGood…:D

Download

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor's degree in Engineering from State University Of Bangladesh, I'm also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i'm a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I'm also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute - a leading Training Institute in the country.
11 comments on “Making Simple Pagination with CodeIgniter Framework and Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *