无法显示数据表。 Laravel 5.5

Question

使用yajra / laravel-datatables时遇到麻烦，这有点令人困惑。我无法使数据表正常工作。我总是会收到此错误：

  

DataTables警告：表ID =数据表-Ajax错误。有关此错误的更多信息，请参见http://datatables.net/tn/7   

这是我的代码： pr-items.blade.php

@extends('layouts.app')
@section('content')

<div class="container-fluid">
<!-- Your main wrapper -->

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading"><h3 class="panel-title">Add Items</h3></div>
                <div class="panel-body">

                    <form class="form-inline" action="#">


                      <div class="form-group">
                        <label for="pr_form_number">PR Form Number: </label>
                        <input type="text" class="form-control" value="{{$pr_details->pr_form_no}}" readonly required><br><br>
                      </div>

                      <div class="table-responsive">
                        <table class='table table-bordered table-hover' id="datatable">
                            <thead>
                                <tr class='info'>
                                    <th style='width:10%;'>ITEM NO.</th>
                                    <th style='width:10%;'>QTY</th>
                                    <th style='width:10%;'>UNIT</th>
                                    <th style='width:25%;'>DESCRIPTION</th>
                                    <th style='width:15%;'>COST PER UNIT</th>
                                    <th style='width:10%;'>COST PER ITEM</th>
                                    <th style='width:10%;'>ACTION</th>
                                </tr>
                            </thead>
                            <thead>
                                <tr>
                                    <th class="custom-tbl"><input class='form-control input-sm'style='width:100%;' type="text" name="" value="1" readonly required></th>
                                    <th class="custom-tbl"><input class='form-control input-sm' style='width:100%;' type="text" name=""></th>
                                    <th class="custom-tbl"><input class='form-control input-sm' style='width:100%;' type="text" name=""></th>
                                    <th class="custom-tbl"><input class='form-control input-sm' style='width:100%;' type="text" name=""></th>
                                    <th class="custom-tbl"><input class='form-control input-sm' style='width:100%;' type="text" name=""></th>
                                    <th class="custom-tbl"><input class='form-control input-sm' style='width:100%;' type="text" name=""></th>
                                    <th class="custom-tbl"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-plus"></span></button></th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                            <tfoot>
                                <tr class='info'>
                                    <td style='width:65%;text-align:right;padding:4px;' colspan='5'>GRAND TOTAL:</td>
                                    <td style='padding:0px;'>
                                        <section class='form-group'>
                                            <input type='text' class='form-control input-sm' id='grand_total' name='grand_total' value='0' readonly required>
                                        </section>
                                    </td>

                            </tfoot>

                        </table>
                      </div>


                      <!-- <button type="submit" class="btn btn-default">Submit</button> -->
                    </form>

                </div>

            </div>
        </div>

    </div>


</div>



@endsection


@section('script')

<script type="text/javascript">

    $(document).ready(function() {
        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('pr.items.data') }}",
            columns: [
                {data: 'id', name: 'id'},
                {data: 'pr_qty', name: 'pr_qty'},
                {data: 'pr_unit', name: 'pr_unit'},
                {data: 'pr_description', name: 'pr_description'},
                {data: 'pr_cost_per_unit', name: 'pr_cost_per_unit'},
                {data: 'pr_estimated_cost', name: 'pr_estimated_cost'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });



    });




</script>
@endsection

PurchaseRequestItemController.php

public function index($id)
    {
        //
        $pr_details = PurchaseRequestModel::find($id);
        return view('pr-items',compact('pr_details'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    public function getItems()
    {
        $pr_details = PurchaseRequestModel::all()->pr_form_no;
        $item_query = PurchaseRequestItemModel::query()->where('pr_form_no','=',$pr_details);
        return \DataTables::of($item_query)
        ->addColumn('action', function ($pr) {
            return '<a href="#" class="btn btn-primary btn-xs">Edit</a><a href="#" class="btn btn-primary btn-xs">Delete</a>';
        })->make(true);    
    }

我在这里尝试制作一个可以在按下添加按钮后添加项目的表格。抱歉，我的代码令人困惑。谢谢