Unable to load datatable data inside my table
Unable to load datatable data inside my table
Jay_550
Posts: 3Questions: 2Answers: 0
I'm new to programming and I'm trying to implement datatables in CodeIgniter. I've tried this, but I cannot get the data to load in my table.
Controller Class(Contacts.php):
public function lists($type='')
{
$this->load->library('pagination');
$main['page_title']=$this->config->item('site_name').' - Contacts';
$main['records']=$this->contacts_model->get_records();
$main['jsArray'] = array('public/assets/plugins/datatables/jquery.dataTables.min.js',
'public/assets/plugins/datatables/dataTables.bootstrap.js',
'public/assets/plugins/datatables/dataTables.buttons.min.js',
,'public/assets/js/jQuery.dtplugin.js',
'public/assets/js/datatable.contacts.js');
$main['cssArray'] = array('public/assets/plugins/datatables/jquery.dataTables.min.css',
'public/assets/plugins/datatables/buttons.bootstrap.min.css');
$main['page'] = 'crm/contacts/index';
$this->load->view('crm/index',$main);
}
public function listsdt($type='1'){
if($type !='') {
$cond['contact_type'] =$type;
}
$this -> load -> library('Datatable', array('model' => 'contactsdatatable', 'rowIdCol' => 'c.id','conds'=>$cond,'order'=>'added_date desc'));
$jsonArray = $this -> datatable -> datatableJson(array( 'added_date' => 'date' ));
$this -> output -> set_header("Pragma: no-cache");
$this -> output -> set_header("Cache-Control: no-store, no-cache");
$this -> output -> set_content_type('application/json') -> set_output(json_encode($jsonArray));
}
Model classes:
Contactsdatatable.php:
<?php
class Contactsdatatable extends CI_Model implements DatatableModel{
function __construct()
{
parent::__construct();
}
public function appendToSelectStr() {
return array( 'refid' => 'concat(c.refno, \'|\',c.id)',
'fnid' => 'concat(c.firstname, \' \',c.lastname, \'|\',c.id)',
'contact_name' => 'concat(c.firstname, \' \',c.lastname)',
'addedby' => 'concat_ws("",users.display_name,import_source)',
'agent_name'=>'cu.display_name',
'contact_source'=>'source.title',
'contact_type' => 'types.title' ,
'added_by' => 'users.display_name'
);
}
public function appendToGroupBy() {
return "c.id";
}
public function fromTableStr() {
return 'crm_contacts as c';
}
public function joinArray(){
return array(
'crm_clients_users as cu|left' => 'cu.id = c.agents_id',
'crm_contacts_details as detail|left' => 'detail.contacts_id = c.id and detail.contacttype = "personal"',
'crm_sources as source|left' => 'source.id = c.contact_source and source.language = "'.$this->session->userdata('client_language').'"',
'crm_contact_types as types|left' => 'types.id = c.contact_type and types.language = "'.$this->session->userdata('client_language').'"',
'crm_clients_users as users|left' => 'c.added_by = users.id and users.clients_id = "'.$this->session->userdata('clientsessid').'"'
);
}
public function whereClauseArray(){
return array('c.delete_status'=>'N');
}
}
?>
Contacts_model.php:
function get_records(){
$this->db->select("*");
$this->db->from("crm_contacts as con");
$this->db->where("con.status='Y'");
$query = $this->db->get();
return $query->result();
}
View class:
<table id="datatable" class="table table-striped table-bordered dtcontacts">
</table>
...
var ajax_base_url = '<?php echo site_url('contacts/listsdt/'); ?>';
datatable.contacts.js:
$(function() {
datatable_contacts();
$( '#fkeyword' ).on( 'keyup change', function () {
$('#datatable').DataTable()
.column().search(this.value, true)
.draw();
});
// for select box
$('.search-input-select').on( 'change', function () { searchcoloms($(this),$(this).val());});
});
function searchcoloms(obj,value){
var i =obj.data('column');
var v =value;
var table =$('.dtcontacts').dataTable();
table.api().columns(i).search(v).draw();
}
function datatable_contacts(){
//wait till the page is fully loaded before loading table
//dataTableSearch() is optional. It is a jQuery plugin that looks for input fields in the thead to bind to the table searching
var dataTableLists = $(".dtcontacts").dataTable({
searching: true, paging: true, "lengthChange": false, "bInfo": true,
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: [9,10]
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[7, 'desc' ]],
oLanguage: { sProcessing:false },
lengthMenu: [[ 25, 50, 100], [25, 50,100]],/*"dom": '<"top"f>rt<"bottom"ilp>',*/
pagingType: "full_numbers",
processing: true,
serverSide: true,
bFilter:true,
ajax: {
"url": ajax_base_url,
"type": "POST"
},
columns: [
{ data: "$.refid",
render: function ( data, type, row ) {var d = data.split("|");
if ( type === 'display' ) {
return '<a class="text-info" href="'+site_url_view+d[1]+'">'+d[0]+'</a>' ;
}
return data;
}
},
{data: "$.fnid",
render: function ( data, type, row ) {var d = data.split("|");
if ( type === 'display' ) {
return '<a class="text-info" href="'+site_url_view+d[1]+'">'+d[0]+'</a>' ;
}
return data;
}
},
{ data: "detail.mobile" ,
render: function ( data, type, row ) {
if ( type === 'display' && data) {
return '<a class="text-info" href="tel:'+data+'">'+data+'</a>' ;
}
return data;
}},
{ data: "detail.email",
render: function ( data, type, row ) {
if ( type === 'display' && data) {
return '<a class="text-info" href="mailto:'+data+'">'+data+'</a>' ;
}
return data;
} },
{ data: "$.contact_source" },
{ data: "$.contact_type" },
{ data: "$.agent_name",
render: function ( data, type, row ) {
if ( type === 'display') {
return '<span class="'+(data?'':'text-warning')+'">'+(data?data:'Unassigned')+'</span>' ;
}
return data;
}},
{ data: "added_date" },
{ data: "$.addedby" },
{ data: "c.id",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<a class="btn btn-info btn-xs" href="'+site_url_edit+data+'"><i class="fa fa-pencil" title="edit"></i></a>' ;
}
return data;
}, className: "text-center"} ,
{ data: "c.id",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<a class="btn btn-primary btn-trans btn-xs" href="'+site_url_view+data+'"><i class="fa fa-search" title="view"></i></a>' ;
}
return data;
}, className: "text-center"}
]
}).dataTableSearch(1);
}
Doing so I'm still unable to get my data to appear in the table
Answers
What's the Ajax response coming back from the server? Are you seeing errors in the DataTable?
Colin
I'm not getting an AJAX response back. I should get listsdt/ in my network tab, but I dont get any AJAX response
Looks like Datatables should be sending the Ajax request to
contacts/listsdt/. Does this happen?If you are seeing the request but not the response you will need to do some debugging of the server to find out why there is not a response.
Kevin