带有DataTables的Laravel 5.5：ajax请求使view.blade消失

我开始学习laravel框架，所以我正在尝试使用dataTables构建一个简单的应用程序 .

我正在尝试使用Yajra \ Datatables \ Datatables来学习一些教程 .

问题是：当我转到表所在的页面时，视图消失，它只显示ajax请求中的数据，如print_r（）函数 .

我尝试了不同的教程，甚至从xampp改为宅基地，但结果总是一样的 .

我的代码：

routes/web.php

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

Controller: App/Http/Controllers/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);
}

Model: /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

在主view.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'},
            ],
    });

这应该是视图应该是这样的：

view without ajax request

现在，屏幕上显示的内容如下：

view with ajax request

UPDATE ：现在我放弃使用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

我不知道使用这种方法的缺点，但它的工作原理 .