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 Show Data Using Ajax in codeigniter 4?
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, 'Sana', 'sana@gmail.com'),
(4, 'Sara', 'sara@gmail.com'),
(5, 'Arham', 'arham@gmail.com'),
(6, 'Simran', 'simran@gmail.com'),
(7, 'kashaf', 'kashaf@gmail.com');
Model
File name : UserModel.php
<?php
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
protected $table = 'users';
protected $allowedFields = ['name', 'email'];
public function getUsers($id = false) {
if($id === false) {
return $this->findAll();
} else {
return $this->getWhere(['id' => $id]);
}
}
}
?>
Controller
File name : index.php
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\UserModel;
class CrudController extends BaseController {
public function index(){
$data['name'] = 'John Doe';
$data['content'] = 'crud/index_crud';
return view('templates/main', $data);
}
public function user_table(){
$model = new UserModel();
$data['users'] = $model->getUsers();
echo view('crud/user_table', $data);
}
}
?>
File name : index.php
$routes->get('/', 'CrudController::index');
view
File name : app/Views/templates/main.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Codeigniter AJAX Tutorial - Fetch Data from Database Example</title>
</head>
<body>
<?php echo view($content); ?>
</body>
</html>
view
File name : app/Views/crud/index_crud.php
<div id="userTable"> </div>
<script>
reloadTable()
function reloadTable() {
$.ajax({
url: "<?php echo site_url('CrudController/user_table'); ?>",
beforeSend: function (f) {
$('#userTable').html('Load Table ...');
},
success: function (data) {
$('#userTable').html(data);
}
})
}
</script>
view
File name : app/Views/crud/user_table.php
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php foreach($users as $data) { ?>
<tr>
<td><?php echo $data['id']; ?></td>
<td><?php echo $data['name']; ?></td>
<td><?php echo $data['email']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
File name : index.php
File name : index.php