为什么我的DataTables无法正常工作？

Question

Im using Laravel 5.5 with this package https://github.com/yajra/laravel-datatables Im getting following response on my browser tab instead of a table. Without datatable function, page loads perfectly with static content. Can anyone point me what im missing on my snippets?

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
{
    //
}

resources/views/product/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

Answer 1

You have set two actions with the same url /product and the same method get in web.php. In this case Laravel use the last one ProductController@getdata so you get json instead of html in your browser.

Just change url for ajax like this:

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

Also replace route('product/getdata') with route('product.getdata');