Datatable shows some warning when data is fetching from database using ajax - php

Question

I am trying to listing data (between two dates) from database in to data tables via ajax. But data tables shows some warning message.
I am using laravel and jquery.
Data Tables warning: table id=callListDatatable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4`
My console preview shows
[{
"call_from": "4915739463158",
"call_to": "4994156959988",
"direction": "in",
"answered_by": "voicemail_msg2",
"called_at": "2016-11-17 18:04:55",
"answered_at": null,
"hungup_at": null,
"duration_ring": "00:00:00",
"duration_call": "00:00:00"
}, {
"call_from": "49718280230",
"call_to": "4994156959988",
"direction": "in",
"answered_by": "voicemail_msg1",
"called_at": "2016-11-17 08:09:26",
"answered_at": null,
"hungup_at": null,
"duration_ring": "00:00:00",
"duration_call": "00:00:00"
}, {
"call_from": "491743078107",
"call_to": "4994156959982",
"direction": "in",
"answered_by": "Andreas Hauzenberger",
"called_at": "2016-11-17 09:16:14",
"answered_at": "2016-11-17 09:16:37",
"hungup_at": "2016-11-09 09:17:53",
"duration_ring": "00:00:23",
"duration_call": "00:01:16"
}]
I don't know what happen. Please help me to solve this issue.
Here is my jquery code
//Data table
$('#callListDatatable').DataTable({
"scrollX": true,
"lengthMenu": [[100, 250, 500, 1000, -1], [100, 250, 500, 1000, "All"]],
"order": [[ 4, "desc" ]],
"language": {
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen...",
"sProcessing": "Bitte warten...",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden.",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
}
}
}).columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
/*Data Tables functionality End*/
/* Date range functionality begin */
$('#reportrange').daterangepicker({
/*autoUpdateInput: false,*/
ranges: {
'Last 7 Days': [moment().subtract(7, 'days'), moment()],
'Last 30 Days': [moment().subtract(30, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'DD.MM.YYYY'
}
});
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD.MM.YYYY') + '-' + picker.endDate.format('DD.MM.YYYY'));
var data = $(".reportrange").val();
var daterange = data.replace(/\s/g, '');
/*$.getJSON('/call/list/daterange', {date: daterange }, function ( json ) {
$('#callListDatatable').dataTable().fnClearTable();
$('#callListDatatable').dataTable().fnAddData( json );
});*/
$.ajax({
type: "POST",
dataType: "json",
url: '/call/list/daterange',
data: {date: daterange },
success : function(data){
console.log(data);
$(data).each(function(key, value){
$('#callListDatatable').dataTable().fnClearTable();
$('#callListDatatable').dataTable().fnAddData( value )
});
}
});
});
Here is my controller code
public function show(Request $request)
{
/*dd($request->all());*/
$dateExplode = explode("-", $request->date);
$dateBegin = date('Y-m-d 00:00:00', strtotime($dateExplode[0]));
$dateEnd = date('Y-m-d 23:59:00', strtotime($dateExplode[1]));
$calls = Call::select('call_from', 'call_to', 'direction', 'answered_by', 'called_at', 'answered_at', 'hungup_at', 'duration_ring', 'duration_call')
->whereBetween('called_at', [$dateBegin, $dateEnd])
->get();
return json_encode($calls);
}

Answer 1

Problem with selector, use ID instead class.
var data = $(".reportrange").val();
change this to
var data = $("#reportrange").val();