Codeigniter Tutorials

Home » Codeigniter »

DataTables in Codeigniter using Ajax

use DataTables for display data in html table format and we will also use Bootstrap modals for inserting and updating data. we will implement DataTables server side processing by using Ajax.

we will fetch data from Mysql table by using Ajax in Codeigniter Application and then after we will displaying that data in on web page by using DataTables jquery plugin with server side processing. we have to write query for search, order and pagination at server side.

Controllers :-

File Name : Crud.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Crud extends CI_Controller {
//functions
function index(){
$data["title"] = "Codeigniter Ajax CRUD with Data Tables and Bootstrap Modals";
$this->load->view('crud_view', $data);
}
function fetch_user(){
$this->load->model("crud_model");
$fetch_data = $this->crud_model->make_datatables();
$data = array();
foreach($fetch_data as $row)
{
$sub_array = array();
$sub_array[] = '<img src="'.base_url().'upload/'.$row->image.'" class="img-thumbnail" width="50" height="35" />';
$sub_array[] = $row->first_name;
$sub_array[] = $row->last_name;
$sub_array[] = '<button type="button" name="update" id="'.$row->id.'" class="btn btn-warning btn-xs">Update</button>';
$sub_array[] = '<button type="button" name="delete" id="'.$row->id.'" class="btn btn-danger btn-xs">Delete</button>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $this->crud_model->get_all_data(),
"recordsFiltered" => $this->crud_model->get_filtered_data(),
"data" => $data
);
echo json_encode($output);
}
}

Models :-

File Name : crud_model.php

<?php
class Crud_model extends CI_Model
{
var $table = "users";
var $select_column = array("id", "first_name", "last_name", "image");
var $order_column = array(null, "first_name", "last_name", null, null);
function make_query()
{
$this->db->select($this->select_column);
$this->db->from($this->table);
if(isset($_POST["search"]["value"]))
{
$this->db->like("first_name", $_POST["search"]["value"]);
$this->db->or_like("last_name", $_POST["search"]["value"]);
}
if(isset($_POST["order"]))
{
$this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else
{
$this->db->order_by('id', 'DESC');
}
}
function make_datatables(){
$this->make_query();
if($_POST["length"] != -1)
{
$this->db->limit($_POST['length'], $_POST['start']);
}
$query = $this->db->get();
return $query->result();
}
function get_filtered_data(){
$this->make_query();
$query = $this->db->get();
return $query->num_rows();
}
function get_all_data()
{
$this->db->select("*");
$this->db->from($this->table);
return $this->db->count_all_results();
}
}

View :-

File Name : crud_view.php

<html>
<head>
<title><?php echo $title; ?></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<style>
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box
{
width:900px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:10px;
}
</style>
</head>
<body>
<div class="container box">
<h3 align="center"><?php echo $title; ?></h3><br />
<div class="table-responsive">
<br />
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th width="10%">Image</th>
<th width="35%">First Name</th>
<th width="35%">Last Name</th>
<th width="10%">Edit</th>
<th width="10%">Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var dataTable = $('#user_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url:"<?php echo base_url() . 'crud/fetch_user'; ?>",
type:"POST"
},
"columnDefs":[
{
"targets":[0, 3, 4],
"orderable":false,
},
],
});
});
</script>

Itechtuto

Codeigniter Tutorials

DataTables in Codeigniter using Ajax

File Name : Crud.php

File Name : crud_model.php

File Name : crud_view.php

Connect Us Socially:

Quick Links