DataTable CRUD Example using Codeigniter, MySQL and AJAX

In my previous post DataTable using Codeigniter, MySQL and AJAX , I have shown how to paginate, search, sort etc. in DataTable grid with server-side processing  but in this post I am going to show you how to perform CRUD operations with DataTable grid in Codeigniter framework.

Grid view in an Web page is a very important now-a-days. Functions like sorting, searching, pagination is not an easy job in HTML tables. One of many grid view frameworks, an open source, light weight, highly flexible and customizable DataTable API is the most popular among. It offers features like AutoFill, inline editing, sticky header, responsive, and supports bootstrap. In version 1.10 DataTable has changed and improved over other versions.
In basic initialization datatable provides pagination, sorting, instant searching by loading whole data records at once. It can be a performance issue fetching large amount of data from server side. It will be better if we integrate server side pagination, searching and sorting, so we can break large amount data in chunk to increase the performance  significantly.


Netbeans 8.1
XAMPP in Windows
Codeigniter 3.1.0

Configure XAMPP and Netbeans

From Netbeans IDE go to Tools->Options. Click on PHP. Now on tab “General” browse the file for “PHP 5 Interpreter”. The php interpreter file generally placed inside the <physical drive in Windows OS>:xampp\php\php.exe

Configure Codeigniter and Netbeans

Create a new PHP project in Netbeans. Then remove the index.php file from the newly created project. Now copy the extracted files from Codeigniter 3.1.0 to the newly created project directory.

The following example shows how to perform CRUD(Create, Read, Update, Delete) operations with DataTable and Codeigniter together.

Final Output

When you get a list of contacts from database table

codeigniter datatable

When you edit a particular row on a DataTable grid

codeigniter datatable

When you add an entry

codeigniter datatable

Step 1. Now modify <root directory>/application/config/autoload.php file for auto-loading html, url, file, form and database

modify also <root directory>/application/config/database.php

Step 2. Create a controller file DataTableController.php under ci_3_1_0/application/controllers with the following source code

Step 3. Create a model file DataTableModel.php under ci_3_1_0/application/models with the following source code

Step 4. Create a view file data_table_crud.php under ci_3_1_0/application/views

Step 5. Modify file ci_3_1_0/application/config/routes.php file

Step 6. Create MySQL table contact under database roytuts.

Dump some data

Step 7. If everything is fine then run the application. You will get the output in the browser.

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.