Ajax Datatable CRUD Operation Using PHP and MySQL — Phpflow.com

in this tutorial, We’ll learn about how to add add, edit, delete functionality using Bootstrap 5, PHP and MySQL.I am extending previous tutorial Ajax Pagination with Search and Sort.

We have already added functionality to listing, searching, and sorting into datatable, So Let’s add functionality to CRUD operation without page refresh.

We have already added the CRUD button into the previous tutorial, we just add into them fucntionality.

We will cover the following features in this Datatable Tutorial:

• Add Record into the Datatable
• Edit record into the Datatable
• Delete record from the datatable

jQuery Datatable CRUD Operation

You will learn how to implement Live Add, Edit, and Delete DataTables Records with Ajax PHP and MySQL.

There are following files will participate into his tutorial:

• index.php: The main entry file of the project.
• action.php: This file is used to define all actions.
• Employee.php: This file will contains all action method.
• partials/container.php: This the container file of CRUD operation.
• partials/header.php: This file is header file of the project.
• partials/footer.php: This file is contains footer details of the project.

I am assuming, You have already created structure and added some code:

Create Actions

We’ll define all actions with method details and added below code into the action.php file:

Ajax Add a Record into Datatable

Let’s add functionality to create a new record into MySQL and show it into the datatable listing.

Add A Record Into the Datatable

We’ll create an HTML view into the index.php file, I am using a modal box to add/edit a record. The below modal box HTML view, It'll use for both types operations: add and edit a record.

Open Add Record Modal

Let’s open add a record modal box, when the user clicked on ‘add a record’ button.

Submit Form Data Using Ajax

We’ll create an ajax request into the common.js file.

Created a Action Method

Now, I’ll add the action method into the employee.php file.

Ajax Update a Record into the Datatable

Let’s add functionality to update an existing record into MySQL and show it into the datatable listing.

HTML View for Update a Record Using AJAX

I am using the same add a modal box to edit a record into the datatable.

Submit Form Data Using Ajax

We’ll create an ajax request into the common.js file.

Created a Action Method To Update Record

Now, I’ll update the action method into the employee.php file. Let's create a MySQL query using the posted payloads data, after that run the query into the MySQL database.

Delete a Record from the Datatable

Let’s add functionality to delete an existing record from MySQL and update the datatable listing.

Submit Delete Request Using Ajax

We’ll create an ajax request into the common.js file, to delete a record from the database, the target id( emp_id) is passed as a parameter.

Created a Action Method To Update Record

Add a delete action method into the employee.php file. This method will call from the above ajax request.

Conclusion:

We have learned about datatable AJAX live add, edit and delete functionality. You can implement it in your project, it’s very simple and easy. We have used the latest version of datatable and bootstrap5 to implement datatable CRUD operation.

Originally published at https://www.phpflow.com on September 12, 2021.