Besoin d'aide ?

Laravel 8 erreur 404 DataTable

Avatar de Gelal
Gelal

Salut à tous,

Je suis un débutant avec laravel et actuellemnt j'essaie d'apprendre la manipulation d'Ajax en utilisant avec Yajra DataTable. Pour ce faire j'ai suivi ce tuto de positronx.io sur le sujet https://www.google.com/amp/s/www.positronx.io/laravel-datatables-example/%3famp mais quoique je fasse j'ai une erreur 404 dans ma console.

Voici ce ue j'ai dans mon web.php

Route::get('/students', [StudentController::class, 'index']);
Route::get('/students/list', [StudentController::class, 'getStudents'])->name('students.list');

Mon StudentController.php


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Student;

use Yajra\DataTables\Facades\DataTables;

class StudentController extends Controller
{
    public function index(){
        return view('students.index');
    }

    public function getStudents(Request $request){
        if ($request->ajax()) {

            $data = Student::all();

            return DataTables::of($data)->make(true);
        }
    }
}

Mon index.blade.php


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name='csrf-token' content="{{ csrf_token() }}">

    <link rel="stylesheet" href="{{ URL::asset('bootstrap.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('dataTables.bootstrap4.min.css') }}">

    <title>DataTables Undersatnding</title>
</head>
<body>
    <div class="container">
        <table class="table-bordered table" id="table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Pseudo</th>
                    <th>Phone</th>
                    <th>DOB</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src="{{ URL::asset('jquery-3.6.0.min.js') }}"></script>
    <script src="{{ URL::asset('dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ URL::asset('dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('bootstrap.min.js') }}"></script>
    <script src="{{ URL::asset('bootstrap.bundle.min.js') }}"></script>
    <script src="{{ URL::asset('custom.js') }}"></script>
</body>
</html>

Le custom.js

$(function () {
    $('#table').DataTable({
        processing:true,
        serverSide : true,
        ajax : "{{ route('students.list') }}",
        columns: [
            {data : 'DT_RowIndex', name : 'DT_RowIndex'},
            {data : 'name', name: 'name'},
            {data : 'email', name: 'email'},
            {data : 'pseudo', name: 'pseudo'},
            {data : 'phone', name: 'phone'},
            {data : 'dob', name: 'dob'},
        ]
    })
})

Losque je lance ce code je n'ai que l'entête de mon tableau qui apparait et j'obtient une erreur dans la console du navigateur : Failed to load resource : the server responded with a status of 404 (Not Found)

Posté il y a 3 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Salut, Moi ce que j'aurai fait c'est déjà virer la vérif ajax et essayé l'url /students/list en direct pour tester.

Sinon t'a beaucoup plus simple: tu n'utilise pas Yajra (que je ne connais pas) et tu fais ça à la place:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Student;

class StudentController extends Controller
{
    public function index(){
        $data['students'] = json_encode(Student::all());
        return view('students.index', $data);
    }
}
$(function () {
    $('#table').DataTable({
        processing:true,
        serverSide : true,
        data:{!! $students !!},
        columns: 
            {data : 'name', name: 'Name'},
            {data : 'email', name: 'Email'},
            {data : 'pseudo', name: 'Pseudo'},
            {data : 'phone', name: 'Phone'},
            {data : 'dob', name: 'Dob'},
        ]
    })
})

Un truc du genre

Posté il y a 3 mois

Vous ne pouvez pas répondre à ce sujet.