November 5, 2023
Category : Codeigniter
Ajax
How to implement and use DataTables in CodeIgniter?
Datatables is one of the best libraries for display data in tabular format and easily ajax search, sort, pagination etc. here I give you an example of CodeIgniter 3 with database ajax integration example. you can easily use jquery ajax datatables in your codeigniter project.
This post is going to look at how you can implement datatables plugin into your CodeIgniter application. We will be grabbing some data from a database and then using Datatables' plugin to display it, allowing for ajax searching, sorting and pagination feature.
I would like to give you very short and quick example, so you can get it quickly and easily. You have to just follow below step and get a full example like as below screenshot.
Preview:
Step 1: Create items table
In this step we will create new new table "items" in database. You can use following SQL Query for create "items" table. So let's create using bellow sql query:
items table:
CREATE TABLE IF NOT EXISTS `items` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`description` text COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;
Step 2: Create Routes
Here, we will add new routes for list items. so open routes.php file and add code like as bellow:
application/config/routes.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['item'] = "item/index";
$route['get_items'] = "item/get_items";
Step 3: Create Item Controller
now, we have to create "Item" controller with index() and get_items(). so create ImageUpload.php file in this path application/controllers/Item.php and put bellow code in this file:
application/controllers/Item.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Item extends CI_Controller {
/**
* Get All Data from this method.
*
* @return Response
*/
public function __construct() {
parent::__construct();
$this->load->database();
}
/**
* Create from display on this method.
*
* @return Response
*/
public function index()
{
$this->load->view('index');
}
/**
* Create from display on this method.
*
* @return Response
*/
public function get_items()
{
$draw = intval($this->input->get("draw"));
$start = intval($this->input->get("start"));
$length = intval($this->input->get("length"));
$query = $this->db->get("items");
$data = [];
foreach($query->result() as $r) {
$data[] = array(
$r->id,
$r->title,
$r->description
);
}
$result = array(
"draw" => $draw,
"recordsTotal" => $query->num_rows(),
"recordsFiltered" => $query->num_rows(),
"data" => $data
);
echo json_encode($result);
exit();
}
}
Step 4: Create View File
In this step we will create index.php view file . In this file we will write design of html table and include datatables. So let's update following file:
application/views/index.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter 3 Datatables Ajax Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Codeigniter 3 Datatables Ajax Example</h2>
<table id="item-list" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#item-list').DataTable({
"ajax": {
url : "/get_items",
type : 'GET'
},
});
});
</script>
</html>
So let's run and see.
I hop it can help you...
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
We are Recommending you
- Codeigniter Create Dynamic Tree View using Treeview JS
- Codeigniter Google Recaptcha Form Validation Example
- Codeigniter Ajax Pagination using JQuery Example
- Codeigniter Multiple Database Connection Example
- Codeigniter Resize Image and Create Thumbnail Example
- Codeigniter 3 - Basic CRUD application with MySQL Example with Demo
- Codeigniter Dynamic Dependent Dropdown using Ajax Example
- How to Implement Flash Messages in Codeigniter?
- Codeigniter Ajax Infinite Scroll Pagination Example
- Codeigniter Ajax CRUD Tutorial Example
- Codeigniter Select2 Ajax Autocomplete from Database Example
- Codeigniter 3 and AngularJS CRUD with Search and Pagination Example.
;void(0);){kind=link}