CodeIgniter 4 Pagination Example Tutorial

In this CodeIgniter 4 pagination with bootstrap 4 example tutorial. Now, you will learn how to use pagination with bootstrap 4 tables in codeigniter 4 framework

In this CodeIgniter 4 pagination with Bootstrap 4 table example, we will create a table and display list of users with pagination in codeigniter 4 projects.

How to Create Pagination in Codeigniter 4 Project

Follow the following steps, you can create a list with bootstrap 4 table using codeigniter 4 pagination:

Step 1: Setup Codeigniter Project
Step 2: Basic Configurations
Step 3: Create Database With Table
Step 4: Setup Database Credentials
Step 5: Create Model and Controller
Step 6: Create Views
Step 7: Start Development server

Step 1: Setup Codeigniter Project

In this step, we will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2: Basic Configurations

Next, we will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Step 3: Create Database With Table

In this step, we need to create a database name demo, so let’s open your PHPMyAdmin and create the database with the name demo. After successfully create a database, you can use the below SQL query for creating a table in your database.

CREATE TABLE users (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    email varchar(255) NOT NULL COMMENT 'Email Address',
    contact_no varchar(50) NOT NULL COMMENT 'Contact No',
    created_at varchar(20) NOT NULL COMMENT 'Created date',
    PRIMARY KEY (id)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;


INSERT INTO users(id, name, email, mobile_number, created_at) VALUES
  (1, 'Team', '[email protected]', '9000000001', '2019-01-01'),
  (2, 'Admin', '[email protected]', '9000000002', '2019-01-02'),
  (3, 'User', '[email protected]', '9000000003', '2019-01-03'),
  (4, 'Editor', '[email protected]', '9000000004', '2019-01-04'),
  (5, 'Writer', '[email protected]', '9000000005', '2019-01-05'),
  (6, 'Contact', '[email protected]', '9000000006', '2019-01-06'),
  (7, 'Manager', '[email protected]', '9000000007', '2019-01-07'),
  (8, 'John', '[email protected]', '9000000055', '2019-01-08'),
  (9, 'Merry', '[email protected]', '9000000088', '2019-01-09'),
  (10, 'Keliv', '[email protected]', '9000550088', '2019-01-10'),
  (11, 'Herry', '[email protected]', '9050550088', '2019-01-11'),
  (12, 'Mark', '[email protected]', '9050550998', '2019-01-12');

Step 4: Setup Database Credentials

In this step, we need to connect our project to the database. we need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, We need to set up database credentials in this file like below.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'demo',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,
	];

Step 5: Create Model and Controller

So go to app/Models/ and create here one model. And you need to create one model name contactModel.php and update the following code into your contactModel.php file:

<?php namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;

class UserModel extends Model
{
    protected $table = 'contacts';

    protected $allowedFields = ['name', 'email'];
}

Create Controller

Now Go to app/Controllers and create a controller name Users.php. In this controller, we will create some method/function. We will build some of the methods like :

Index() – This is used to display users list with pagination.

<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\UserModel;

class Users extends Controller
{
    public function index()
    {    
        $model = new UserModel();

        $data = [
            'users' => $model->paginate(10),
            'pager' => $model->pager
        ];
       
        return view('users', $data);
    }
}

Step 6: Create Views

Now we need to create users.php, go to application/views/ folder and create users.php file. and update the following HTML into your files:.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Codeigniter 4 Pagination Example - Tutsmake.com</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">

   <div class="container">
    <div class="row mt-5">
       <table class="table table-bordered">
         <thead>
            <tr>
               <th>Id</th>
               <th>Name</th>
               <th>Email</th>
            </tr>
         </thead>
         <tbody>
            <?php if($users): ?>
            <?php foreach($users as $user): ?>
            <tr>
               <td><?php echo $user['id']; ?></td>
               <td><?php echo $user['name']; ?></td>
               <td><?php echo $user['email']; ?></td>
            </tr>
           <?php endforeach; ?>
           <?php endif; ?>
         </tbody>
       </table>
        <div class="row">
          <div class="col-md-12">
            <div class="row">
              <?php if ($pager) :?>
              <?php $pagi_path='demo/public/index.php/users'; ?>
              <?php $pager->setPath($pagi_path); ?>
              <?= $pager->links() ?>
              <?php endif ?>        
             </div> 
          </div>
        </div>
    </div>
  </div>
</div> 
</body>
</html>

Step 7: Start Development server

For start development server, Go to the browser and hit below the URL.

http://localhost/demo/public/index.php/users

Conclusion

In this Codeigniter 4 pagination with Bootstrap 4 table example tutorial, We have successfully create table using boostrap 4 and show data with pagination in codeigniter 4 projects.

One reply to CodeIgniter 4 Pagination Example Tutorial

Jennie

3 years ago

Thank you for this tutorial. This really helps in creating a simple pagination.
I wonder if you could make a tutorial where you have multiple queries like where() and join() where the results are arrays, and paginate them with hasNext, hasPrevious, First and Last. Please I really need help with this pagination. Thanks.