1

estou com um problema bizarro que esta me fazendo arrancar os cabelos, eu sei que estou criando um json válido via server side, até usei um validador de json. o formato do meu json é dessa maneira:

[
 {
   "name": "jhon doe",
   "age": "22",
   "eye": "brown"
 },
 {
   "name": "amanda",
   "age": "26",
   "eye": "blond"
 }
]

ao instanciar o datatables, ele me traz todos os resultados de uma só vez. não pagina, e a opção de filtrar para que venham apenas 10 resultados por vez também não funciona. eis meu código javascript:

$('#list_table').DataTable({
            processing: true,
            serverSide: true,
            language: language,
            ajax: {
                url: 'myurl.dev/fetchdata',
                dataType: 'json',
                dataSrc: ''
            },
            columns: [
                { data: "name" },
                { data: "age" },
                { data: "eye" }         
            ],

            responsive: true,
            autoWidth: false,
            order: [0, 'desc'],
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
        });

ao checar a aba network -> XHR. vejo que a resposta me traz o resultado assim:aba network do chrome

o que mais posso fazer para que ele funcione a paginação da maneira correta? é a primeira vez que estou lidando com este problema usando datatables.

1 Resposta 1

1

Altere a variável serverSide: true para false. Quando você diz que o serverSide é false, seu web service deve entregar os dados da paginação.

Este seria um retorno válido retirado da documentação do DataTable, veja neste link:

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
    [
        "Airi",
        "Satou",
        "Accountant",
        "Tokyo",
        "28th Nov 08",
        "$162,700"
    ],
}

Resumindo, apenas altere serverSide para false.

Veja um exemplo funcional:

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

    processing: true,
    serverSide: false,
    ajax: {
      url: 'https://jsonplaceholder.typicode.com/posts',
      dataType: 'json',
      dataSrc: ''
    },
    columns: [{
        data: "id"
      },
      {
        data: "title"
      },
      {
        data: "body"
      }
    ],

    lengthMenu: [
      [1, 5, 15, -1],
      [1, 5, 15, "All"]
    ]
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.1/js/jquery.dataTables.min.js"></script>


<table id="table_id" class="display">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .