Not shown datatable in Laravel

0

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;
    
asked by Shredder 24.10.2018 в 03:47
source

1 answer

0

On your controller change

return Datatables::of(Product::query())->make(true);

for

return Datatables::of(Product::query())->toJson;

and the scripts do not go together with the styles, usually they are put before closing the tag body

in your role

public function index()
{
    return view('home');
    return Datatables::of(Product::query())->make(true);
}

what are you returning wrongly

I recommend you create a controller for the Datatables as it says in the yajrabox documentation

in that controller you would create a function to return your data from the table

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


public function getRes()
    {
        return Datatables::of(Product::query())->toJson;
        ->toJson();
    }

in your routes file

 Route::get('datatable/getres', 'DataTablesController@getRes')->name('datatable/getres');

and

Route::get('datatable', 'DataTablesController@datatable');

and the ajax you only change

url: '{{ route('datatable/getres') }}',
    
answered by 25.10.2018 в 19:49