Jquery DataTable with Ignited-Datatables CodeIgniter - codeigniter

Question

Update:
I finally found the solution for this problem. If you face the same
problem as mine, you can try visit this link
I am having problem when want to integrate Jquery DataTables with CodeIgniter Ignited-Datatables library
When I use the default DataTables sServerMethod property which is "GET", I got the json response with data from my php. However since CodeIgniter use post, I stuck at loading server data although the function return me correct json output.
So I follow this guide to change the sServerMethod to "POST". Now I dont stuck at loading server data, but I dont get the data that I need.
JSON response using sServerMethod GET (get correct json, but stuck at loading server data as in the image)
{
"sEcho": 0,
"iTotalRecords": 10,
"iTotalDisplayRecords": 10,
"aaData": [
[
"Munauwar",
"Syed",
"Mr",
"6012345678",
"0000-00-00",
"basikal"
],
[
"Mak",
"Je Wei",
"Mr",
"6012345678",
"0000-00-00",
"motor"
]
],
"sColumns": "first_name,last_name,salutation,number,birthday,group_name"}
JSON response using sServerMethod POST
{
"sEcho": 1,
"iTotalRecords": 10,
"iTotalDisplayRecords": 0,
"aaData": [],
"sColumns": "first_name,last_name,salutation,number,birthday,group_name"}
This is my javascript code
$('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "bootstrap",
"sAjaxSource": config.base_url + "contact/popup_contact",
"sServerMethod": "POST"
});
My function in contact controller
function popup_contact()
{
$this->datatables
->select('first_name,last_name,salutation,number,birthday,group_name')
->from('tb_contact')
->join('tb_contact_group', 'tb_contact.contact_group_id = tb_contact_group.contact_group_id');
echo $this->datatables->generate();
}

Answer 1

If the method above still doesn't work, then its because you have set: $config['csrf_protection'] = true; // in your config of Codeigniter
Simply add the aoData.push line first thing in your fnServerData call:
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push({name: '<?php echo $this->security->get_csrf_token_name(); ?>', value: '<?php echo $this->security->get_csrf_hash(); ?>'});
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
}

Answer 2

$('#smstable').dataTable({
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 20,
//"bPaginate": true,
"bAutoWidth": false,
"iDisplayStart": 0,
"bLengthChange": false,//for sorting 10,20,30,50 ....
"sAjaxSource": "././myadmin/ajaxadmin/dt_sms",
"aaSorting": [[ 1, "desc" ]],
"sPaginationType": "full_numbers",
"aoColumns":[
{"bSearchable": false,"bSortable": false,"bVisible": false},
{"bSearchable": true,"bSortable": true},
{"bSearchable": false,"bSortable": false},
{"bSearchable": true,"bSortable": true},
{"bSearchable": false,"bSortable": true},
{"bSearchable": false,"bSortable": false}
],
"fnServerData": function(sSource, aoData, fnCallback){
$.ajax(
{
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
}
);//end ajx
// console.log(fnCallback);
}
});//end datable
Just check my code and check if you missed something. That code works very fine with me.

Answer 3

Anytime you got stuck on loading data from server.....it's basically cause by column set.
Just count the "aoColumns" array and make sure is exactly equal to the table head set in your view file.
It's has happened to me time and again.....and the only solution has always been the column array set.