For some reason, the data in the table does not appear using DataTables. And if I remove the return view ('home'), I get a query that eats the whole page
The home view:
<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>
@extends('layouts.app')
@section('content')
<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">
<h2>Productos actuales </h2>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Precio</th>
<th>Empresa</th>
</tr>
</thead>
</table>
</div>
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url('home') }}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nombre', name: 'nombre' },
{ data: 'precio', name: 'precio' }
{ data: 'empresa', name: 'empresa' }
]
});
});
</script>
<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
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');
return Datatables::of(Product::query())->make(true);
}
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');
}
}
The routes in web.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/create', 'HomeController@create');
Route::get('/home/index', 'HomeController@index');
What I have in the Product Provider
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $fillable = ['nombre', 'precio', 'empresa'];
}
This is my database, I want you to get the product data
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;