Laravel 5.5 с DataTables: запрос ajax приводит к исчезновению view.blade

Question

Я начинаю изучать фреймворк laravel, поэтому я пытаюсь создать простое приложение с таблицами данных.

Я пытаюсь следовать некоторым учебникам, используя Yajra \ Datatables \ Datatables.

Проблема заключается в следующем: когда я перехожу на страницу, где находится таблица, представление исчезает, и оно показывает толькоданные в ajax-запросе, например, функция print_r ().

Я пробовал разные учебники и даже перешел с xampp на усадьбу, но результат всегда одинаков.

Мой код:

маршруты / web.php

Route::resource('/pages/show_asos', 'ShowAsosController');
Route::get('/pages/show_asos', 'ShowAsosController@task')- >name('datatables.data');

Контроллер: приложение / Http / контроллеры / ShowAsosController

public function create()
{
   return view('/pages/show_asos');
}

public function task() 
{

   $asos = Asos::select(['id', 'name', 'admission', 'function', 
   'last_exam', 'next_exam']);
   return DataTables::of($asos)->make(true);
}

Модель: /app/Asos.php

class Asos extends Model
{
    protected $fillable = ['name','admission','function','last_exam', 'next_exam'];
    protected $guarded = ['id', 'created_at', 'update_at'];
    protected $table = 'asos';
}

resources / pages / show_asos.blade.php

@extends('layouts.default')

@section('content')
    <!-- Page Content -->
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row bg-title">
                <div class="col-lg-12">
                    <h4 class="page-title">Controle de Exames Periódicos</h4>
                    <ol class="breadcrumb">

                    </ol>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12">
                    <div class="white-box">
                        <table id="asos-table" class="datatable mdl-data-table dataTable" cellspacing="0"
                               width="100%" role="grid" style="width: 100%;">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nome</th>
                                <th>Admissão</th>
                                <th>Função</th>
                                <th>Último Exame</th>
                                <th>Próximo Exame</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- row -->

        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
    </div>
    <!-- /#page-wrapper -->
    @push('custom-scripts')
        <script src="{{ asset('js/asos.js') }}"></script>
    @endpush
@stop

На главном экране.blade У меня есть:

@stack('custom-scripts')

JS: /public/js/asos.js

$('#asos-table').DataTable({
            "language": {
                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar",
                "oPaginate": {
                    "sNext": "Próximo",
                    "sPrevious": "Anterior",
                    "sFirst": "Primeiro",
                    "sLast": "Último"
                },
                "oAria": {
                    "sSortAscending": ": Ordenar colunas de forma ascendente",
                    "sSortDescending": ": Ordenar colunas de forma descendente"
                }
            },
            processing: true,
            serverSide: true,
            ajax: "{!! route('datatables.data') !!}",
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'admission', name: 'admission'},
                {data: 'function', name: 'function'},
                {data: 'last_exam', name: 'last_exam'},
                {data: 'next_exam', name: 'next_exam'},
            ],
    });

Предполагается, что вид должен выглядеть так:

просмотр без запроса ajax

А теперь, что появляется на экране:

просмотр с запросом ajax

ОБНОВЛЕНИЕ : Пока я сдалсяиспользуя Yajra \ Datatables \ Datatables и ajax.Если кто-то поймет, что я делаю неправильно, я попробую еще раз.

Поэтому я использую следующий код:

//Controller
$asos = Asos::all();
return view ( '/pages/show_asos' )->withData ( $asos );

//View
@foreach($data as $key => $item)
    <tr class="item{{$item->id}}">
    <td>{{$item->id}}</td>
    <td>{{$item->name}}</td>
    <td>{{$item->admission}}</td>
    <td>{{$item->function}}</td>
    <td>{{$item->last_exam}}</td>
    <td>{{$item->next_exam}}</td>
    </tr>
 @endforeach

Я не знаю минусов использования этогометод, но он работает.

Answer 1

Поскольку ваш источник ajax является URL-адресом, используйте следующий синтаксис:

$('#example').dataTable( {
  "ajax": {
   "url": {the_url}
    ......
  }}
 );

source: https://datatables.net/reference/option/ajax