CodeIgniter 4 Pagination Example Tutorial

Hi Guys,

In this tutorial,I will learn you how to use paginaton in codeigniter 4.you can easy and simply use pagination in codeigniter 4.

In most cases, you will be using the Pager library in order to paginate results that you retrieve from the database. When using the Model class, you can use its built-in paginate() method to automatically retrieve the current batch of results, as well as set up the Pager library so it’s ready to use in your controllers. It even reads the current page it should display from the current URL via a page=X query variable.

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

Step 1: Download 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.

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', 'info@test.com', '9000000001', '2019-01-01'),
  (2, 'Admin', 'admin@test.com', '9000000002', '2019-01-02'),
  (3, 'User', 'user@test.com', '9000000003', '2019-01-03'),
  (4, 'Editor', 'editor@test.com', '9000000004', '2019-01-04'),
  (5, 'Writer', 'writer@test.com', '9000000005', '2019-01-05'),
  (6, 'Contact', 'contact@test.com', '9000000006', '2019-01-06'),
  (7, 'Manager', 'manager@test.com', '9000000007', '2019-01-07'),
  (8, 'John', 'john@test.com', '9000000055', '2019-01-08'),
  (9, 'Merry', 'merry@test.com', '9000000088', '2019-01-09'),
  (10, 'Keliv', 'kelvin@test.com', '9000550088', '2019-01-10'),
  (11, 'Herry', 'herry@test.com', '9050550088', '2019-01-11'),
  (12, 'Mark', 'mark@test.com', '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

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'];
}

Step 6: 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 :

<?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 7: 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 8: Start Development server

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

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

It will help you...