Slow loading with JQuery DataTables plugin

Navigation
1

I'm using JQuery DataTables on a small system and everything was fine until I came across a listing of almost 2500 records ...

The point is that it takes some time for the information to be loaded and adjusted in the DataTable, which causes it to load and display all 2500 records on the page until everything is loaded and paging takes effect.

Would there be any way to avoid / mask this? Currently I do not use ajax, I do so:

On my Controller: 

public function index()
{
    $funcoes = Funcao::orderBy('id')->get();
    return view('cadastros/funcao/index', compact('funcoes'));
}

In my View: 

<table id="appDatatable" class="table table-bordered table-hover">
    <thead><tr><th>...</th></tr></thead>
    <tbody>
    @foreach($funcoes as $funcao)
    <tr>
        <td>{{ $funcao->cbo }}</td>
        <td>{{ $funcao->nome }}</td>
        ...
    </tr>
    @endforeach
    </tbody>
</table>

My script: 

<script>
    $(function () {
        $("#appDatatable").DataTable({
            sPaginationType: "simple_numbers",
        });
    });
</script>
    
asked by anonymous 09.08.2016 / 15:04

1 answer

1

I've been through this problem. I noticed that the slowness was caused by I manually populating the table and then using $ ('# table'). DataTable (). I see two alternatives to resolve this, but both need ajax.

The first, easiest option is to make an ajax call and deliver json to the DataTables

Therefore: 

function preencherTabela(jsonData) {
    $('#tabela').DataTable({
        destroy: true, //retirar essa linha caso você nunca recarregar a tabela
        sPaginationType: "simple_numbers",
        data: jsonData,
        columns: [
            { "data": "Cbo" },
            { "data": "Nome" }
        ]
    });
}

$.ajax({
    url: '/suaUrl',
    type: 'GET',
    success: function (jsonData) {
        preencherTabela (jsonData);
    }
});

The second, more elegant option, would be to use server-side processing and make a real pagination. I've never particularly needed to do this and therefore I can not help you much. More on the subject here

    
09.08.2016 / 16:05
Adding and removing classes with javascript Error in declarations with Array