Laravel and Datatables AJAX

Question

I'm sure this question might have been asked a long time ago but I have searched everywhere online and don't quite get the results that I am looking for.

I am busy building a app that makes use of Datatables Jquery plugin and everything seems to be working as I can access the route and the data is passed to the frontend but no data is being display in my table.

Here is my Controller Function:

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

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

And my routes file:

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

});

And my Blade File

    @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

Here is the response from the frontend when looking at the 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

Any help with this matter would be greatly appreciated

add the script within ` $(document).ready(function () {})` and `make(true);` — Mayuri Pansuriya, Oct 03 '18 at 09:30
When doing that it returns jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function...jQuery is loaded on the page and when I remove it out of the $(doument).ready() it gives no error — RiaanV, Oct 03 '18 at 09:32
Just for the record, all of this logic could be greatly simplified using https://github.com/yajra/laravel-datatables (Laravel Datatables API) — andcl, Oct 03 '18 at 09:33
have you added datatable jquery client library in your scripts? — linktoahref, Oct 03 '18 at 09:34
try changing `serverSide: false,` to `true` and `processing: false,` to `true` — linktoahref, Oct 03 '18 at 09:38
processing just hangs on the screen and no data in table . No errors in console — RiaanV, Oct 03 '18 at 09:43

score 0 · Answer 1 · answered Oct 03 '18 at 09:44

0

Might be a problem with columns, try the docs suggested format:

<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>

answered Oct 03 '18 at 09:44

andcl

3,342
7
33
61

nope tried that only returns error: request unknow parameter – RiaanV Oct 03 '18 at 09:46
Look at the docs, in the comment: *return Datatables::of($articles)->make(**true**);* – andcl Oct 03 '18 at 09:50
passing true does not make a difference result remains the same – RiaanV Oct 03 '18 at 09:53
{draw: 1, recordsTotal: 2, recordsFiltered: 2, data: [,…], queries: [,…],…} data: [,…] draw: 1 input: {draw: "1", columns: [,…], order: [{column: "0", dir: "asc"}], start: "0", length: "10",…} queries: [,…] recordsFiltered: 2 recordsTotal: 2 – RiaanV Oct 03 '18 at 09:54
It must be a client side error then. This has to be made: add the script within `$(document).ready(function () {})` and `make(true);`. See https://stackoverflow.com/questions/31227844/typeerror-datatable-is-not-a-function – andcl Oct 03 '18 at 10:00

score 0 · Answer 2 · answered Oct 03 '18 at 12:57

0

Hey guys I got it fixed by moving the jQuery function out of the blade and into a snippet that manages my ajax sources. Thanks for the help

answered Oct 03 '18 at 12:57

RiaanV

260
2
14

Laravel and Datatables AJAX

2 Answers2