datatables using codeigniter does not add result to table - php

Question

I am trying to display search results into a table using DataTables. I am getting search results into JSON and validated also against valid JSON, but I get this DataTables warning:
table id=volunteer_result - Invalid JSON response.
For more information about this error, please see http://datatables.net/tn/1.
I have used below codes :
views: searchdemo.php
<div class="form-group">
<button id="search_demo" class="btn btn-form">Search</button>
</div>
<div id="demo_result_div" class="table-responsive" style="background-color:#fff;">
<table id="demo_result" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
js: searchdemo.js
var table;
$('#search_demo').click(function () {
//datatables
table = $('#demo_result').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' servermside processing mode.
//"order": [], //Initial no order.
"iDisplayLength" : 10,
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('/demo/searchdemo')?>",
"type": "POST",
"dataType": "json",
"dataSrc": function (jsonData) {
return jsonData.data;
}
},
//Set column definition initialisation properties.
"columnDefs": [
{
"targets": [ 0 ], //first column / numbering column
"orderable": false, //set not orderable
},
],
});
});
controller:Demo.php
class Demo extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->model('demo/Demo_model');
}
public function index() {
}
public function searchdemo() {
$data['branch_list'] = $this->Demo_model->get_company_branches();
// set form validation rules
$this->form_validation->set_rules('branch', 'Branch', 'trim|required');
// submit
if ($this->form_validation->run() == FALSE) {
// validation failed, send validation errors to the view
$data['branch_list'] = $this->Demo_model->get_company_branches();
$this->load->view('templates/header');
$this->load->view('demo/searchdemo',$data);
$this->load->view('templates/footer');
} else {
// set variables from the form
$formdata = array(
'branch_id' => $this->input->post('branch'),
'length' => intval($this->input->post('length')),
'start' => intval($this->input->post('start')),
'order' => $this->input->post('order')
);
$users_list = $this->Demo_model->get_user_details($formdata);
if(!empty($users_list )){
$data = array();
foreach ($users_list as $user) {
$row = array();
$row['name'] = $user->name;
$row['role'] = $user->role;
$data[] = $row;
}
}
}
$output = array(
"draw" => intval($this->input->post('draw')),
"recordsTotal" => $this->Demo_model->count_all_active($formdata),
"recordsFiltered" => $this->Demo_model->count_filtered($formdata),
"data" => $data
);
//output to json format
echo json_encode($output);
}
}
model:Demo_model.php
class Demo_model extends CI_Model {
var $table = "users u";
var $select_column = array("u.id", "u.name", "ur.role");
var $column_order = array(null, "u.name","ur.role");
var $order = array('u.name' => 'asc'); // default order
function make_query($formdata) {
if($formdata['branch_id']) {
$this->db->select($this->select_column);
$this->db->from($this->table);
$this->db->where('u.active','yes');
$this->db->where('u.branch_id',$formdata['branch_id']);
$this->db->join('user_role ur','u.role_id=ur.id');
}
if(isset($_POST['order'])) { // here order processing
$this->db->order_by($this->column_order[$formdata['order']['0']['column']], $formdata['order']['0']['dir']);
}
else if(isset($this->order)) {
$order = $this->order;
$this->db->order_by(key($order), $order[key($order)]);
}
}
function get_user_details($formdata){
$this->make_query($formdata);
if(isset($formdata['length']) && $formdata['length'] < 1) {
$formdata['length']= '10';
} else {
$formdata['length']= $formdata['length'];
}
if(isset($formdata['start']) && $formdata['start'] > 1) {
$formdata['start']= $formdata['start'];
}
$this->db->limit($formdata['length'], $formdata['start']);
$query = $this->db->get();
return $query->result();
}
}
When I select a branch from the dropdown and click on Search button, it just returns the below JSON into the web browser instead of displaying results into search page table.
{
"draw": 0,
"recordsTotal": 2000,
"recordsFiltered": 2,
"data": [
{
"name": "Raman",
"role": "manager"
},
{
"name": "Maharaja",
"role": "admin"
}
]
}
I referred this link https://www.phpflow.com/php/server-side-datatable-sorting-searching-pagination-using-codeigniter-ii/
I have tried the many help URL for data table invalid JSON response but didn't get any luck.

Answer 1

You need to define data source for each column using columns.data option.
Change your initialization code as shown below:
var table = $('#demo_result').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "<?php echo site_url('/demo/searchdemo')?>",
"type": "POST"
},
"columns": [
{ "data": "name", "orderable": false },
{ "data": "role" }
]
});