Question

我正在尝试将database的数据（在两个日期之间）列入data tables到ajax。但是数据表显示了一些警告信息。

我正在使用laravel和jquery。

数据表警告：table 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();

使用ajax从数据库中获取数据时，Datatable会显示一些警告

1 个答案: