无法显示数据表。 Laravel 5.5

Question

Using yajra/laravel-datatables and I'm having trouble, it's a bit confusing. I can't make the datatable work. I always get this error:

DataTables warning: table id=datatable - Ajax error. For more information about this error, please see http://datatables.net/tn/7

Here's my code: 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);    
    }

I was here trying to make a table which adds items upon pressing the add button. Sorry if my code is confusing. Thanks