Datatable在使用ajax从数据库中提取数据时显示一些警告

Question

我试图将database中的数据（在两个日期之间）列入data tables，并通过ajax列出。但是数据表显示了一些警告信息。

我使用laravel和jquery。

数据表警告：表ID = callListDatatable - 请求的未知参数 '0' 0行，列0。有关此错误的详细信息，请参阅http://datatables.net/tn/4`

我的控制台预览显示

[{ 
    "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" 
}] 

我不知道会发生什么。请帮我解决这个问题。

这是我的jquery代码

//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) 
        }); 
       } 
      }); 
     }); 

这是我的控制器代码

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

问题的选择器，使用ID而不是类。

var data  = $(".reportrange").val(); 

改变这

var data  = $("#reportrange").val();