This tutorial demonstrates how to implement pagination with Bootstrap 4 tables in CodeIgniter 4 framework. By following this example, you will learn how to create a table and display a list of users with pagination in CodeIgniter 4 projects. The tutorial focuses on the use of Bootstrap 4 for designing the table and CodeIgniter 4’s built-in pagination library for pagination functionality. With the help of this tutorial, you will be able to easily implement pagination in your CodeIgniter 4 web applications, making it easier for users to navigate large sets of data.
How to Implement Pagination in Codeigniter 4 Application
Follow the below steps, implement a list with bootstrap 4 table using codeigniter 4 pagination:
Download Codeigniter Latest
Basic Configurations
Create Database With Table
Setup Database Credentials
Create Model and Controller
Create Views
Start Development server
Conclusion
Download Codeigniter Latest
To get started with CodeIgniter 4, the first step is to download the latest version of the framework. You can download the framework from the official CodeIgniter website at https://codeigniter.com/download.
Once you have downloaded the CodeIgniter 4 setup, unzip the archive and save it in your local system. You can save it in the XAMPP/htdocs/ directory if you are using XAMPP as your local development environment.
Basic Configurations
Now, we need to configure some basic settings in the “app/config/app.php” file. To do this, we will open the “config.php” file located in the “application/config” folder using a text editor.
Set Base Url Like This
public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';
Create Database With Table
Now, we need to create a database for our CodeIgniter 4 application. To do this, we will use PHPMyAdmin, which is a popular web-based database management tool.
To get started, open PHPMyAdmin and create a new database with the name “demo”. You can do this by selecting the “New” button from the left-hand menu and then entering the name “demo” in the appropriate field.
After you have created the database, you can use SQL queries to create tables and insert data. For example, if you want to create a table to store user registration data, you can use the following SQL query:
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', '2023-01-01'),
(2, 'Admin', 'admin@test.com', '9000000002', '2023-01-02'),
(3, 'User', 'user@test.com', '9000000003', '2023-01-03'),
(4, 'Editor', 'editor@test.com', '9000000004', '2023-01-04'),
(5, 'Writer', 'writer@test.com', '9000000005', '2023-01-05'),
(6, 'Contact', 'contact@test.com', '9000000006', '2023-01-06'),
(7, 'Manager', 'manager@test.com', '9000000007', '2023-01-07'),
(8, 'John', 'john@test.com', '9000000055', '2023-01-08'),
(9, 'Merry', 'merry@test.com', '9000000088', '2023-01-09'),
(10, 'Keliv', 'kelvin@test.com', '9000550088', '2023-01-10'),
(11, 'Herry', 'herry@test.com', '9050550088', '2023-01-11'),
(12, 'Mark', 'mark@test.com', '9050550998', '2023-01-12');
Setup Database Credentials
Now, we need to connect our CodeIgniter 4 project to the database. To do this, we will open the “database.php” file located in the “app/Config” folder using a text editor.
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,
];
Create a 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);
}
}
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 - torqueprogramming.co.in</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>
Start Development server
For start development server, Go to the browser and hit below the URL.
http://localhost/demo/public/index.php/users
Conclusion
This tutorial shows you how to make a table with Bootstrap 4 and use pagination to show data in CodeIgniter 4 projects. We were successful in creating the table and displaying data with pagination in CodeIgniter 4. By following this example, you can easily add pagination to your own CodeIgniter 4 web applications, helping users to navigate through large sets of data with ease.