Почему мои DataTables не работают должным образом?

Я использую Laravel 5.5 с этим пакетом https://github.com/yajra/laravel-datatables
Я получаю следующий ответ на вкладке моего браузера вместо таблицы. Без функции данных страница прекрасно загружается со статическим содержимым. Кто-нибудь может указать мне, что мне не хватает в моих отрывках?

127.0.0.1:8000/product

{"draw":0,"recordsTotal":20,"recordsFiltered":20,"data":[{"id":"1","name":"Beef Burger","price":"150","person_serves":"1","category":"Snacks"},{"id":"2","name":"Chicken Burger","price":"140","person_serves":"1","category":"Snacks"},{"id":"3","name":"Mutton Burger","price":"180","person_serves":"1","category":"Snacks"},{"id":"4","name":"Vegetable Burger","price":"100","person_serves":"1","category":"Snacks"},{"id":"5","name":"Chilli Beef Burger","price":"170","person_serves":"1","category":"Snacks"},{"id":"6","name":"Special Cafe Burger","price":"150","person_serves":"1","category":"Snacks"},{"id":"7","name":"Club Sanswitch","price":"90","person_serves":"1","category":"Snacks"},{"id":"8","name":"Beef Sandwitch","price":"150","person_serves":"1","category":"Snacks"},{"id":"9","name":"Beef Burger","price":"150","person_serves":"1","category":"Snacks"},{"id":"10","name":"Chicke Sharma","price":"150","person_serves":"1","category":"Snacks"},{"id":"11","name":"Beef Kebab","price":"150","person_serves":"1","category":"Kebab"},{"id":"12","name":"Chicken Sharma","price":"150","person_serves":"1","category":"Berb-Q"},{"id":"13","name":"Beef Chap","price":"300","person_serves":"2","category":"Kebab"},{"id":"14","name":"Fried Chicken","price":"100","person_serves":"1","category":"Snacks"},{"id":"15","name":"Berbq Grill Chicken","price":"150","person_serves":"1","category":"Berb-Q"},{"id":"16","name":"Fish Kebab","price":"450","person_serves":"2","category":"Kebab"},{"id":"17","name":"Pan Pizza","price":"300","person_serves":"3","category":"Snacks"},{"id":"18","name":"Pizza Regular","price":"150","person_serves":"2","category":"Snacks"},{"id":"19","name":"Mocktail","price":"150","person_serves":"1","category":"Drinks"},{"id":"20","name":"Chocolate Latte","price":"150","person_serves":"1","category":"Drinks"}],"queries":[{"query":"select count(*) as aggregate from (select '1' as `row_count` from `products`) count_row_table","bindings":[],"time":1.71},{"query":"select `id`, `name`, `price`, `person_serves`, `category` from `products`","bindings":[],"time":0.46}],"input":[]}

web.php

Route::get('home', 'HomeController@home');
Route::get('product', 'ProductController@index')->name('product');
Route::get('product', 'ProductController@getdata')->name('product.getdata');

ProductController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;
use Yajra\DataTables\Facades\DataTables;

class ProductController extends Controller
{
function index()
{
//http://127.0.1:8000/product
return view('product.index');
}

function getdata()
{
$products = Product::select(
'id',
'name',
'price',
'person_serves',
'category'
);
return DataTables::of($products)->make(true);
}
}

product.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
//
}

ресурсы / виды / продукта / index.blade.php

@extends('theme.default')
@section('content')
<div class="agile-grids">
<!-- blank-page -->
<!---728x90--->

<div class="banner">
<h2>
<a href="index.html">Home</a>
<i class="fa fa-angle-right"></i>
<span>Blank</span>
</h2>
</div>
<!---728x90--->

<div class="blank">
<div class="blank-page">
<br />
<h3 align="center">Product Lists</h3>
<br />
<table id="product_table" class="table table-bordered" style="width:100%">
<thread>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>People Serves</th>
<th>Category</th>
</tr>
</thread>
</table>
</div>
</div>
<!-- //blank-page -->
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('#product_table').DataTable(
{
"processing"    : true;
"serverSide"    : true;
"ajax"          : "{{ route('product/getdata') }}""columns"       : [
{ "data": "id"},
{ "data": "name"},
{ "data": "price"},
{ "data": "person_serves"},
{ "data": "category"}
]
});
});
</script>

@endsection