Codeigniter 4 Tutorials
- Codeigniter 4
- Application Run
- Application Structure
- Configuration files
- Errors
- Controller
- View
- Model
- How to remove index.php from URL
- Route
- CodeIgniter URLs
- Helper
- Session
- Global Functions and Constants
- Logging Information in CI4
- Error Handling
- Signin / SignUp
- Login / Register
- CRUD
- Crud 1
- Form Validation
- Data Table
- Pagination
- File Upload
- Show Data Using Ajax
- Select2 AJAX Autocomplete Search
- Curl Post
- Rest API
- Weblink
Home » Codeigniter 4 »
How to use Data Table in Codeigniter 4?
Create Users Table :
File name : index.php
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, 'Mahtab', 'mahtab@gmail.com'),
(2, 'Habib', 'habib@gmail.com'),
(3, 'Sara', 'sara@gmail.com'),
(4, 'Arham', 'arham@gmail.com'),
(5, 'sana', 'sana@gmail.com'),
(6, 'Mahira', 'Mahira@gmail.com'),
(7, 'Bebs', 'bebs@gmail.com'),
(8, 'adiba', 'adiba@gmail.com'),
(9, 'simran', 'simran@gmail.com'),
(10, 'sim', 'sim@gmail.com'),
(11, 'mybebs', 'mybebs@gmail.com'),
(12, 'aaliya', 'aaliya@gmail.com'),
(13, 'Boby', 'boby@gmail.com');
Create Model
Create a UserModel.php file in the app/Models/ diretory
File name : index.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
protected $table = 'users';
protected $primaryKey = 'id';
protected $allowedFields = ['name', 'email'];
}
Create Controller
Create the app/Controllers/DatatableController.php file
File name : index.php
<?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
File name : index.php
$routes->get('users-list', 'DatatableController::index');
Display Datatables in Codeigniter
File name : app/Views/user_view.php
<!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>
File name : index.php