Laravel 5.4和Datatables插件：加载缓慢

Question

I'm using laravel 5.4 and datatables plugin. I´m using datatables from paginate, orderby and search in the views of an admin panel. But the plugin is very slow with a table of 7000 records.

In the controller, I tried to show ther records: dd($data['noticias']); and this is fast, but in the view with datatables it takes several minutes!

I've seen some answers but they don´t fit what I'm doing, they use Ajax and I don´t know nothing about ajax. How can I solve the slow load? Thanks.

Controller:

public function index()
{
    $data['noticias'] = Noticia::with('langs')->get();
    $data['sections']  = Section::all();
    $data['positions']  = Position::all();

    return view('panel.noticias.index', compact('data'));
}

View:

<table id="listados" class="table table-striped" data-order='[[ 0, "desc" ]]' data-page-length='25'>

<thead>
    <tr>
        <th width="96">Fecha</th>
        <th data-orderable='false' width="60">Hora</th>
        <th>Título</th>
        <th style="min-width:100px">Sección</th>
        <th data-orderable='false' width="60">Fotos</th>
        <th align="center" width="60">Ancla</th>
        <th data-orderable='false' align="right" width="180">Acciones</th>
    </tr>
</thead>

@foreach($data['noticias'] as $new)
    <tr>

        <td>{!! date('Y-m-d', strtotime($new->date)) !!}</td>
        <td>{!! date('H:i', strtotime($new->time)) !!}</td>

        <td>
            @foreach($new->langs as $new_lang)
                @include('panel.partials.list_name', ['value' => $new_lang, 'route' => 'noticias.edit', 'id' => $new->id, 'name' => $new_lang->title])
            @endforeach
        </td>

        <td>
             @foreach($data['sections'] as $section)
                @if($section->id == $new->section_id)
                    {!! $section->name !!}
                @endif
             @endforeach
        </td>

        <td align="center">
            {!! (count($new->images) == 0) ? '' : count($new->images) !!}
        </td>

        <td align="center">
            @foreach($data['positions'] as $position)
                @if($position->id == "1")
                    <span class="position">
                    {!! ($position->pos1 == $new->id) ? '[ 1 ]' : ''  !!}
                    {!! ($position->pos2 == $new->id) ? '[ 2 ]' : ''  !!}
                    {!! ($position->pos3 == $new->id) ? '[ 3 ]' : ''  !!}
                    {!! ($position->pos4 == $new->id) ? '[ 4 ]' : ''  !!}
                    {!! ($position->pos5 == $new->id) ? '[ 5 ]' : ''  !!}
                    </span>
                @endif
            @endforeach
        </td>

        <td align="right">
            <a href="{{ route('noticias.update-active', $new->id) }}"> @include('panel.partials.list_active', ['value' => $new->active]) </a>
            @include('panel.partials.list_edit', ['route' => 'noticias.edit', 'id' =>$new->id])
            @include('panel.partials.list_image', ['route' => 'noticias.dropzone', 'id' =>$new->id])
            @include('panel.partials.list_show', ['route' => 'noticia', 'id' =>$new->id, 'slug' =>$new_lang->slug])
            @include('panel.partials.list_delete', ['route' => 'noticias.delete', 'id' =>$new->id])
        </td>
    </tr>

@endforeach

The script:

$(document).ready(function(){
$('#listados').DataTable({

    "pageLength": 25,
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],

    "language": {
        "paginate":
            {
                "previous": "←",
                "next": "→"
            },
        "search": "Buscar:",
        "decimal": ",",
        "thousands": ".",
        "lengthMenu": "Mostrar:  _MENU_",
        "zeroRecords": "No se ha encontrado nada",
        "info": "[ _START_ - _END_ de <strong>_TOTAL_</strong> ]",
        "infoEmpty": "No hay registros",
        "infoFiltered": "<i>— filtrados de _MAX_</i>"
    }
});
});

I have included the cdns:

{!! HTML::style('https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.css') !!}

{!! HTML::script('https://cdn.datatables.net/v/bs/dt-1.10.16/datatables.min.js') !!}
{!! HTML::script('https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js') !!}

Answer 1

It is slow just because it is not server side pagination. What is happens is that you get all the 7000 records and after that the jquery plugin will change the dom to work with client side pagination. What i recommend using is this https://github.com/yajra/laravel-datatables .

This plugin is a laravel wrapper for datatables and it will work with server side pagination. So when you will change the page it will send a new ajax request to an endpoint on your app to get that specific page data, so will will query the database for only few rows instead of all of them.

Transformers

https://github.com/spatie/laravel-fractal , it takes a collection or a collectionItem and it changes the data, so if you need to change your model in some way just for few responses, you can do it with this.

Real world fast example is that if you want to send a user instance you can use a transformer to just send username and email on the response, without the password and id or other fields that you have on your User model etc.

Datatables plugin transformer link: http://yajrabox.com/docs/laravel-datatables/master/response-fractal