jQuery扩展了Datatable试图从Laravel变量获取数据

如何解决jQuery扩展了Datatable试图从Laravel变量获取数据

我正试图通过从控制器传递来使用compact（）函数进行查看的变量将数据传递到jquery Datatable，但是我面临的问题是： DataTables警告：表格ID = DataTables_Table_0-Ajax错误。有关此错误的更多信息，请参见http://datatables.net/tn/7

控制器

public function show(Expense $expense)
    {
        $expenseTypes = ExpenseType::all()->sortBy('label');
        $charges = json_encode($expense->charges());
        /*$charges = $expense->charges()->get();*/
        return view('expenses.show',compact('expense','expenseTypes','charges'));
    }
    }

HTML

 <table class="table m-b-0 table-hover expand-table dataTable table-custom">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th style="width: 5%">id</th>
                                            <th>date</th>
                                            <th>description</th>
                                            <th>details</th>
                                            <th style="width: 25%">observation</th>
                                            <th>sum</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        

                                    </tbody>
                                    <tr class="bg-light">
                                        <td colspan="4"></td>
                                        <th class="text-nowrap" scope="row">{{ __('all.total sum')}}</th>
                                        <td colspan="1"><b>{{ $expense->charges()->sum('sum') }} <small>MAD</small></b></td>
                                    </tr>
                                </table>

jQuery

<script>
        /* Formatting function for row details - modify as you need */
        function format ( d ) {
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                '<tr>'+
                '<td>description:</td>'+
                '<td>'+d.description+'</td>'+
                '</tr>'+
                '<tr>'+
                '<td>details:</td>'+
                '<td>'+d.details+'</td>'+
                '</tr>'+
                '<tr>'+
                '<td>observation:</td>'+
                '<td>'+d.observation+'</td>'+
                '</tr>'+
                '</table>';
        }

        $(document).ready(function() {
            var table = $('.expand-table').DataTable( {
                serverSide: false,"ajax": {
                    "url" : "{{$charges}}","type" : "POST"
                },"columns": [
                    {
                        "className":      'details-control',"orderable":      false,"data":           null,"defaultContent": ''
                    },{ "data": "id" },{ "data": "date" },{ "data": "description" },{ "data": "details" },{ "data": "observation" },{ "data": "sum" }
                ],"order": [[1,'asc']]
            } );

            // Add event listener for opening and closing details
            $('.expand-table tbody').on('click','td.details-control',function () {
                var tr = $(this).closest('tr');
                var row = table.row( tr );

                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child( format(row.data()) ).show();
                    tr.addClass('shown');
                }
            } );
        } );
    </script>

解决方法

您正试图将null作为键传递给第一列数据，请使用id或传递的JSON数据中存在的任何其他有效键。当标题中传递的json OR列计数中的键不可用且数据不匹配时，会出现此错误。

"columns": [
                    {
                        "className":      'details-control',"orderable":      false,"data":           'id',/// instead of 'null use id
                        "defaultContent": ''
                    },{ "data": "id" },{ "data": "date" },{ "data": "description" },{ "data": "details" },{ "data": "observation" },{ "data": "sum" }
                ],