Slow loading with Jquery Datatables plugin

Question

I am using Jquery Datatables in a small system and everything was fine until I came across a listing of almost 2500 records...

The point is that it takes a certain amount of time for the information to be loaded and adjusted in Datatable, which causes it to keep loading and displaying all 2500 records on the page until it loads everything and the paging goes into action.

Is there any way to avoid/mask it? I don’t currently use ajax, I do so:

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

Answer 1

I have already experienced this problem. I realized that slowness was caused by manually filling the table and then using $('#table'). Datatable(). I see two alternatives to solve this, but both need ajax.

The first option, easier, is to make an ajax call and deliver json to 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" support and make a real pagination. Personally I never had to do that and therefore I can’t help you much. More on the subject here