Working On Datatables With Ajax In Codeigniter 3 Example

Working on Datatables with Ajax in Codeigniter 3 Example

In this post we will give you information about Working on Datatables with Ajax in Codeigniter 3 Example. Hear we will give you detail about Working on Datatables with Ajax in Codeigniter 3 ExampleAnd how to use it also give you demo for it if it is necessary.

In this Codeigniter tutorial, I will let you know how to work with Datatables using ajax request with example.

DataTables is a jQuery plugin to display data in tabular format with ajax search, sort and pagination.

It’s very easy to integrate datatables into your CodeIgniter project.

Create products table

In this first step, we will create products table in the database.

CREATE TABLE 'products' (
 'id' int(10) unsigned NOT NULL AUTO_INCREMENT,
 'name' varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 'price' double NOT NULL,
 PRIMARY KEY ('id')
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

Create Routes

In this step, we need to add routes to handle the request.

application/config/routes.php

<?php
defined('BASEPATH') ORexit('No direct script access allowed');


$route['default_controller'] ='welcome';
$route['404_override'] ='';
$route['translate_uri_dashes'] =FALSE;

$route['product'] ="product/index";
$route['get_products'] ="product/get_products";

Create Product Controller

In this step, I will create a controller “Product.php”.

In this controller file, we will have two method. First “index” method will load the view and second “get_products” method will return the products list in json format.

application/controllers/Product.php

<?php

defined('BASEPATH') ORexit('No direct script access allowed');

classProductextends CI_Controller {

   publicfunction__construct() {
      parent::__construct();
      $this->load->database();
   }

   publicfunctionindex()
   {
      $this->load->view('product_list');
   }

   publicfunctionget_products()
   {
      $draw=intval($this->input->get("draw"));
      $start=intval($this->input->get("start"));
      $length=intval($this->input->get("length"));

      $query=$this->db->get("products");
      $data= [];
      foreach($query->result() as$r) {
           $data[] =array(
                $r->id,
                $r->name,
                $r->price
           );
      }

      $result=array(
               "draw"=>$draw,
                 "recordsTotal"=>$query->num_rows(),
                 "recordsFiltered"=>$query->num_rows(),
                 "data"=>$data
            );
      echojson_encode($result);
      exit();
   }
}

Create view file

In this step, I will create “product_list.php” view file.

application/views/product_list.php

<html>
<head>
  <title>Working with Datatables ajax in Codeigniter 3 with example</title>
  <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
  <linkrel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
</head>
<body>

<divclass="container">
  <h2>Working with Datatables ajax in Codeigniter 3 with example</h2>
  <tableid="product-list"class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script type="text/javascript"src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"src="http://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script>

    $('#product-list').DataTable({
        "ajax": {
            url :"<?php echo base_url(); ?>index.php/get_products",
            type :'GET'
        },
    });

</script>

</body>

</html>

There is also a tutorial on jQuery DataTable server side processing in PHP.

Server side processing will solve the issue of loading whole data at once. Datatable is highly flexible, customizable and open source Javascript plugin.

Please try this example and let me know if you have any issues.

Label :

PHP

HTML

jQuery

How To

MVC

Web Development

JavaScript

Codeigniter

Database

jQuery DataTables

Hope this code and post will helped you for implement Working on Datatables with Ajax in Codeigniter 3 Example. 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

Working on Datatables with Ajax in Codeigniter 3 Example

Label :

Leave a Comment Cancel Reply