How to Implement DataTables in Codeigniter 4

September 26, 2022September 26, 2022 Administrator 49 views Codeigniter 4, DataTables, How To

How to Implement DataTables in Codeigniter 4 – In this moment, we are planning to toss light on how to utilize and actualize the DataTables in Codeigniter 4 from scratch. We will learn how to form a essential Codeigniter application with strong Execution of DataTables in Codeigniter 4.

We’ll render the information from the database and show that information utilizing the jQuery DataTables plugin.

Codeigniter DataTables Example

Datatables could be a broadly utilized and most prevalent JavaScript library to show information in a unthinkable form. It lets you include progressed interaction controls to your HTML tables and comes with built-in functionalities such as Information Sorting, Searching, Pagination, and Filtering.

To make you get it the complete handle, i will be clarifying everything, separately, and slowly. At that point you may comprehend each foundational step more absolutely and abstain your time from being pulverized from rash

CodeIgniter 4 Server-Side DataTables with Pagination Example

Step 1: Install Codeigniter
Step 2: Display Errors
Step 3: Configure Database Connection
Step 4: Create New Model
Step 5: Create Controller
Step 6: Create Routes
Step 7: Show Data List & Delete

Create new project CodeIgniter 4

Install the new Codeigniter 4 project using the composer package.

composer create-project codeigniter4/appstarter

After installing the starter template rename the application folder as i have changed it to codeigniter-datatables-example. Thereafter, head over to the project directory.

cd codeigniter-datatables-example

Click on the given link to manually download the Codeigniter 4 application.

Display Errors in Codeigniter

This step explains how to enable the error reporting in Codeigniter and shows errors in debugging the app in real-time. Go to app/Config/Boot/development.php file and set the display_errors to 1 instead of 0. Perform the same process in app/Config/Boot/production.php file as well.

ini_set('display_errors', '1');

Configure Database Connection

Let’s evoke the consensus between Codeigniter and MySQL database. Open PHPMyAdmin and create ‘demo’ database, create a username ‘test’ along with a secure password. Then, add your database name, username and password in app/config/database.php file and establish the database connection.

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

To save your time you can execute the SQL query from PHPMyAdmin to create the users table and insert some random data into it.

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',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;
INSERT INTO `users` (`id`, `name`, `email`) VALUES
(1, 'Paul Bettany', 'paul@gmail.com'),
(2, 'Vanya', 'vanya@gmail.com'),
(3, 'Luther', 'luther@gmail.com'),
(4, 'John Doe', 'john@gmail.com'),
(5, 'Paul Bettany', 'paul@gmail.com'),
(6, 'Vanya', 'vanya@gmail.com'),
(7, 'Luther', 'luther@gmail.com'),
(8, 'Wayne Barrett', 'wayne@gmail.com'),
(9, 'Vincent Ramos', 'ramos@gmail.com'),
(10, 'Susan Warren', 'sussan@gmail.com'),
(11, 'Jason Evans', 'jason@gmail.com'),
(12, 'Madison Simpson', 'madison@gmail.com'),
(13, 'Marvin Ortiz', 'paul@gmail.com'),
(14, 'Felecia Phillips', 'felecia@gmail.com'),
(15, 'Tommy Hernandez', 'hernandez@gmail.com');

CodeIgniter\Database\Exceptions\DatabaseException #8
Unable to connect database : Codeigniter

If anyhow you get the Codeigniter – cannot connect to MySQL database error, then change the hostname value based on your local server e.g MAMPP or XAMPP.

# MAMPP
public $default = [
  ...
     'hostname' => '/Applications/MAMP/tmp/mysql/mysql.sock',
  ...
]
# XAMPP
public $default = [
  ...
     'hostname' => '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock',
  ...
]

Create New Model

Create a UserModel.php file in the app/Models/ diretory, then add the given below code.

<?php 
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
    protected $table = 'users';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'email'];
}

Codeigniter offers various configuration options to deal with Model values, you can check the documentation here.

Create Controller

Create the app/Controllers/DatatableController.php file and add the given below code in it.

<?php 
namespace App\Controllers;
use App\Models\UserModel;
use CodeIgniter\Controller;
class DatatableController extends Controller
{
    // Show users list
    public function index(){
        $userModel = new UserModel();
        $data['users'] = $userModel->orderBy('id', 'DESC')->findAll();
        return view('user_view', $data);
    } 
}

Create Routes

Ideally, we need to create a route that will be using to display the users list within the Datatables. To generate the routes add the following code inside the app/Config/Routes.php file.

$routes->get('users-list', 'DatatableController::index');

Display Datatables in Codeigniter

In this step, we will render the data from database and display in Codeigniter template using DataTables. We have included the Datatables CDN link of jQuery and CSS in the footer.

Create app/Views/user_view.php file and insert the following code in it.

We will render the data from the database and display that data using the jQuery DataTables plugin.

<!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 Datatables Example - positronx.io</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
  <div class="mt-3">
     <table class="table table-bordered" id="users-list">
       <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>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready( function () {
      $('#users-list').DataTable();
  } );
</script>
</body>
</html>

Run Application

Run the following command to start the app:

php spark serve

Check the app on the following URL:

http://localhost:8080/index.php/users-list

Implement and Use Datatables in CodeIgniter 4

Summary

Finally, we have completed Datatables in the Codeigniter tutorial. We have assorted everything accordingly. Now you can quickly sort, search, paginate, and filter data in Codeigniter.

Simultaneously, we have looked into every imperative and gave precedence to our main topic that is almost and equally important for every web developer.