Jquery datatable Ajax pagination

Question

Hi have this JS script :

<script type="text/javascript" src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('#usersTable').DataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "bDeferRender": true,
            "sAjaxSource": "{{ path('prospection_prospects_ajax') }}",
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
        $.fn.dataTableExt.sErrMode = 'throw';
    });
</script>

This HTML code :

<table id="usersTable" class="table">
    <thead>
    <tr>
        <th>Societe</th>
        <th style="width:150px;">Telephone</th>
        <th>Description</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    {% for prospect in prospects %}
        <tr>
            <td>{{ prospect.societe}}</td>
            <td>{{ prospect.telephone }}</td>
            <td>{{ prospect.description }}</td>
            <td>
                <a href="{{ path("prospection_prospect_details",{userId:user.id}) }}">Details</a><br />
                <a href="{{ path("prospection_prospect_details",{userId:user.id}) }}">Supprimer</a><br />
                <select>
                    <option value="prospect">Prospect</option>
                    <option value="Contacter">Contacté</option>
                </select>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

And i return this JSON (i return 100 records by 100 records):

{
"recordsTotal": 5055,
"recordsFiltered": 5055,
"draw": 1,
"records": [{
    "name": "Alerys",
    "telephone": "01 42 96 08 37",
    "description": "Prestations : cabinet de recrutement informatique, Evaluation, « Assessment Center », Bilan de carrière, Conseils en mobilité professionnelle et en organisation, Audit, Délégation de ressources, chasseur de tête, test psychotechnique, reconversion profess",
    "link": "<select><option value='prospect'>Prospect</option><option value='Contacter'>Contacté</option></select>"
}, {
    "name": "EuroWin Consulting Group",
    "telephone": "01 42 27 73 00",
    "description": "cabinet de recrutement informatique",
    "link": "<select><option value='prospect'>Prospect</option><option value='Contacter'>Contacté</option></select>"
} ...
]

And Datable throws me this error : Uncaught Error: DataTables warning: table id=usersTable - Invalid JSON response.

I'm not able to do works pagination.

Someone can help me ?

Best regards

Answer 1

Are you sure records is the name of the key.

While at Datatable's official site the name of key is data

https://datatables.net/examples/data_sources/server_side.html