Datatable does the search command but does not show the result

I managed to make him make the command to look up the data of a table, but he does not show them in the datatable, I do not know why. Does the query, but does not show it.

I already asked this question 2 times, and nobody even tells you. I do not know if the subject is very difficult.

HomeController.php

namespace App\Http\Controllers;
use App\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Yajra\DataTables\Facades\DataTables;

class HomeController extends Controller
{
/**
 * Create a new controller instance.
 *
 * @return void
 */
public function __construct()
{
    $this->middleware('auth');
}

/**
 * Show the application dashboard.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
    return view('home');
}

public function sendData(Request $request){
    $this->validate($request, [
        'nombre'    =>  'required',
        'precio'     =>  'required',
        'empresa'     =>  'required'
    ]);

    $product = new product([
        'nombre'    =>  $request->get('nombre'),
        'precio'     =>  $request->get('precio'),
        'empresa'     =>  $request->get('empresa')
    ]);
    $product->save();
    return redirect()->route('home')->with('success', 'Data Added');
}

public function create()
{
    return view('home');
}

public function get_datatable()
{
    return Datatables::eloquent(Product::query())->make(true);
}


}

What I have in web.php

<?php

Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::post('/home/sendData', 'HomeController@sendData')->name('home/sendData');
Route::get('/home/get_datatable', 'HomeController@get_datatable')->name('home/get_datatable');
Route::get('/home/create', 'HomeController@create');

What I have in home.blade

@extends('layouts.app')

@section('content')

    <link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<div class="container">
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">Dashboard</div>

            <div class="card-body">
                @if (session('status'))
                    <div class="alert alert-success" role="alert">
                        {{ session('status') }}
                    </div>
                @endif

                Has iniciado sesion
            </div>
        </div>
    </div>
</div>
</div>
<br></br>
<center><div class="w3-container">

<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button tablink w3-red" onclick="opentab(event,'London')">Meter datos</button>
<button class="w3-bar-item w3-button tablink" onclick="opentab(event,'Paris')">Ver datos</button>
</div></center>

<div id="London" class="w3-container w3-border city">
<div class="row">

<div class="col-md-12">
<br />
<center><h3>Meter datos del producto</h3></center>
<br />
<form method="post" action="{{url('home/sendData')}}">
{{csrf_field()}}
<div class="form-group" align="center">
<input type="text" name="nombre" class="form-control" placeholder="Coloque el nombre del producto" />
</div>
<div class="form-group" align="center">
<input type="number" name="precio" class="form-control" placeholder="Coloque el precio" />
</div>
<div class="form-group" align="center">
<input type="text" name="empresa" class="form-control" placeholder="Coloque el nombre de la empresa" />
</div>
<div class="form-group" align="center">
<input type="submit" class="btn btn-primary" />
</div>

</form>

</div>
</div>

</div>

<div id="Paris" class="w3-container w3-border city" style="display:none">
<center><h2>Productos actuales</h2></center>
        <table class="table table-bordered" id="table" name="table">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Nombre</th>
                 <th>Precio</th>
                 <th>Empresa</th>
                 <th>Fecha de creacion</th>
                 <th>Fecha de actualizacion</th>
              </tr>
           </thead>
        </table>

    <script>
     $(function() {
           $('#table').DataTable({
           processing: true,
           serverSide: true,
           ajax: 'http://localhost/laravel/test/public/home/get_datatable',
           columns: [
            {data: 'id'},
            {data: 'nombre'},
            {data: 'precio'},
            {data: 'empresa'},
            {data: 'created_at'},
            {data: 'updated_at'}
            ]
        });
     });
     </script>
     </div>

<script>
function opentab(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
</script>


@endsection

What I have in Product (The model)     

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
 {
 protected $fillable = ['nombre', 'precio', 'empresa'];
 protected $table =  'products';
 protected $primaryKey = 'id';

 }

The database

CREATE TABLE 'products' (
'id' int(10) UNSIGNED NOT NULL,
'producto' varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
'precio' varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
'empresa' varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL,
'created_at' timestamp NULL DEFAULT NULL,
'updated_at' timestamp NULL DEFAULT NULL) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 
COLLATE=utf8mb4_unicode_ci;