Laravel 5.4 和数据表插件：加载缓慢

Question

我正在使用 laravel 5.4 和数据表插件。我在管理面板的视图中使用来自分页、排序和搜索的数据表。但是该插件非常慢，有 7000 条记录的表。

在控制器中，我尝试显示记录：dd($data['noticias']);，这很快，但在带有数据表的视图中需要几分钟！

我已经看到了一些答案，但它们不适合我正在做的事情，他们使用 Ajax，而我对 ajax 一无所知。如何解决加载慢的问题？谢谢。

控制器：

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

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

查看：

<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

脚本：

$(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>"
    }
});
});

我已经包含了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

它很慢，因为它不是服务器端分页。发生的事情是您获得了所有 7000 条记录，之后 jquery 插件将更改 dom 以使用客户端分页。我推荐使用的是https://github.com/yajra/laravel-datatables。

这个插件是一个用于数据表的 laravel 包装器，它可以与服务器端分页一起使用。因此，当您更改页面时，它将向您应用上的端点发送一个新的 ajax 请求以获取该特定页面数据，因此将仅查询数据库中的几行而不是所有行。

变形金刚

https://github.com/spatie/laravel-fractal ，它需要一个集合或一个 collectionItem 并且它会更改数据，因此如果您需要以某种方式更改您的模型只是为了几个响应，您可以这样做。

真实世界的快速示例是，如果您想发送用户实例，您可以使用转换器仅在响应中发送用户名和电子邮件，而无需密码和 id 或您在用户模型中拥有的其他字段等。

数据表插件转换器链接： http://yajrabox.com/docs/laravel-datatables/master/response-fractal