Codeigniter 3 Datatables Ajax Example From Scratch

By Hardik Savani | January 28, 2018 | | 29000 Viewer | Category : PHP Bootstrap jQuery MySql Codeigniter Ajax


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...




***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: