Laravel и Datatables AJAX

Question

Я уверен, что этот вопрос, возможно, задавали давно, но я искал везде в Интернете и не совсем получил результаты, которые ищу.

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

Вот моя функция контроллера:

public function index()
{
    return view('pages.admin.artikels.index');
}

public function getArticles()
{
    return DataTables::of(Post::query())->make();
}

И мой файл маршрутов:

Route::middleware(['super'])->group(function () {
Route::get('/super/artikels/', 'AdminPostsController@index')->name('super.artikels');
Route::get('/artikels/data', 'AdminPostsController@getArticles')->name('article.data');

});

И мой файл Blade

    @extends('layouts.app')

@section('page_title')
Artikel Administrasie
@endsection

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h5 class="text-teal-dark mb-3 font-weight-bold">
                    <span class="fa fa-angle-double-right text-orange"></span> Artikel Administrasie
                </h5>
                <div id="formContainer">
                    <table id="articles" class="table bg-white table-striped">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Title</th>
                                <th>Body</th>
                                <th>Author</th>
                                <th>Published</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script>
    $('#articles').DataTable({
        serverSide: false,
        processing: false,
        ajax: "{{ route('article.data') }}",
        columns: [
            { data: 'id' },
            { data: 'title' },
            { data: 'body' },
            { data: 'user_id' },
            { data: 'created_at' },
        ]
    });
</script>
@endpush

Вот ответ от внешнего интерфейсапри взгляде на Xhr

    {draw: 0, recordsTotal: 2, recordsFiltered: 2, data: [,…], queries: [,…], input: {_: "1538557939697"}}
data: [,…]
0: {id: "1", title: "Toets Artikel", slug: "toets-artikel", image: "", body: "This is a test article",…}
1: {id: "2", title: "Toets Artikel 2", slug: "toets-artikel-twee", image: "",…}
draw: 0
input: {_: "1538557939697"}
queries: [,…]
recordsFiltered: 2
recordsTotal: 2

Любая помощь в этом вопросе будет принята с благодарностью

Answer 1

Эй, ребята, я исправил это, переместив функцию jQuery из лезвия в фрагмент, который управляет моими источниками ajax.Спасибо за помощь

Answer 2

Может быть проблема со столбцами, попробуйте docs рекомендуемый формат:

<script>
    $('#articles').DataTable({
        serverSide: false,
        processing: false,
        ajax: "{{ route('article.data') }}",
        columns: [
            {data: 0, name: 'id'},
            {data: 1, name: 'title'},
            {data: 2, name: 'body'},
            {data: 3, name: 'created_at'},
            {data: 4, name: 'updated_at'}
        ]
    });
</script>