Datatables bringing all data at once

Question

Datatables bringing all data at once

Navigation

#1 by (1 votes)

1

I'm having a bizarre problem getting my hair ripped, I know I'm creating a valid json via server side, even using a json validator. the format of my json is this way:

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

When instantiating the datatables, it brings me all the results all at once. not page, and the option of filtering so that there are only 10 results at a time also does not work. here's my javascript code:

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

When checking the network tab - > XHR. I see the answer brings me the result like this:

What else can I do to make it work correctly? it's the first time I'm dealing with this problem using datatables.

php javascript codeigniter datatable

asked by anonymous 22.06.2017 / 17:59

1 answer

Group duplicate lines Sql Server Vuejs pass object as props

score 1 · Answer 1

Change the variable serverSide: true to false . When you say that serverSide is false , your web service should deliver paging data.

This would be a valid return from the DataTable documentation, see this link :

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

In short, just change serverSide to false.

See a working example:

$(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><scriptsrc="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>