Codeigniter 3 Datatables Ajax Example From Scratch

In this post we will give you information about Codeigniter 3 Datatables Ajax Example From Scratch. Hear we will give you detail about Codeigniter 3 Datatables Ajax Example From ScratchAnd how to use it also give you demo for it if it is necessary.

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";

Also see:Codeigniter 3 and AngularJS CRUD with Search and Pagination Example.

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

Also see:Codeigniter 3 resize image and create thumbnail example

<!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 >
	<h2>Codeigniter 3 Datatables Ajax Example</h2>

	<table id="item-list" >
		<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…

Hope this code and post will helped you for implement Codeigniter 3 Datatables Ajax Example From Scratch. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Codeigniter 3 Datatables Ajax Example From Scratch

Leave a Comment Cancel Reply