0

I'm trying to use datatables with server-side functionality. But when it tries to fetch data giving me this error; after dismissing it, reloading the data properly.

DataTables warning: table id=clientTable -

Warning gif

As you can see; there is no explanation of the warning. Also I don't have any console warnings. Here are my codes:

Table HTML

<table class="table table-striped table-hover table-bordered" id="clientTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Mail</th>
            <th>Date</th>
            <th>Auto</th>
        </tr>
    </thead>
</table>

datatables initialization

$('#clientTable').dataTable({
    "iDisplayLength": 20,
    "processing": true,
    "serverSide": true,
    "ajax": clientApiConstant,
    "columns": 
    [
        { "data": "id",},
        { "data": "name" },
        { "data": "phone" },
        { "data": "mail" },
        { "data": "date" },
        { "data": "auto" }
    ]
});

Client Api Response

{
    "data": [
    {
      "id": 2,
      "name": "John Doe",
      "date": "2017-04-04T00:00:00+0000",
      "mail": "arda@asd.com",
      "phone": "123123123",
      "auto": true
    },
    {
      "id": 3,
      "name": "Doe John",
      "date": "2017-04-22T00:00:00+0000",
      "mail": "nihatcan@asd.com",
      "phone": "234234234",
      "auto": false
    }
  ],
  "recordsTotal": 2,
  "recordsFiltered": 2,
  "error": []
}

Response to Dipak's answer; this is where my datatables.js fails:

function K(a, b, c, d) {
        c = "DataTables warning: " + (a ? "table id=" + a.sTableId +
        " - " : "") + c;
        d && (c += ". For more information about this error, please see http://datatables.net/tn/" + d);
        if (b)
            E.console && console.log && console.log(c);
        else if (b = m.ext, b = b.sErrMode || b.errMode, a && s(a, null, "error", [a, d, c]), "alert" == b)
            alert(c);
        else {
            if ("throw" == b)
                throw Error(c);
            "function" == typeof b && b(a, d, c)
        }
    }

at "function" == typeof b && b(a, d, c) line; line no 1763 @ version 1.10.15

Arda Oğul Üçpınar
  • 881
  • 1
  • 14
  • 38

2 Answers2

1

This is explanation for your problem

This occurs when jQuery falls into its error callback handler (this callback built into DataTables), which will typically occur when the server responds with anything other than a 2xx HTTP status code. For example the server might respond with 404 Not Found indicating that the file requested is not available at the given URL, or 500 Internal Error which indicates that the server encountered an error while processing the request.

Solution : If you are willing to accept the error (for example if you cannot alter the backend system to fix the error), but don't want your end users to see the alert() message, you can change DataTables' error reporting mechanism to throw a Javascript error to the browser's console, rather than alerting it. This can be done using:

$.fn.dataTable.ext.errMode = 'throw';

For more details check this: https://datatables.net/manual/tech-notes/7

Dipak Thoke
  • 1,963
  • 11
  • 18
  • Nope.. My API returns 200. It was in my check-first my checklist. Symfony profiler and Postman confirm it. But since this error seems like affect nothing, maybe I can use this. But I afraid if it affects – Arda Oğul Üçpınar Apr 23 '17 at 19:43
  • And when I add that code; I have console error and my data is not shown. **jquery.dataTables.js:74:282** I'm editing my question to show which line fails. – Arda Oğul Üçpınar Apr 23 '17 at 19:50
0

write DataTable with Capital 'D' instead of dataTable. for Boolean properties of DataTable use prefix b, and for string properties use prefix s. So user code will like this.

$('#clientTable').DataTable({  
    bServerSide: true,
    sAjaxSource: 'clientApiConstant',
    columns:  [
        { "data": "id",},
        { "data": "name" },
        { "data": "phone" },
        { "data": "mail" },
        { "data": "date" },
        { "data": "auto" }
    ]
}); 

Be careful with upper lower letter casing.

Shakir.iti
  • 103
  • 1
  • 3
  • 13
  • I cannot use sAjaxSource with version 1.10.15; it's not working. Plus; other things like upper D change or bServerSide change doing nothing. Everthing is still same. – Arda Oğul Üçpınar Apr 23 '17 at 16:47
  • please this article how to use dataTable instead of DataTable http://stackoverflow.com/questions/25207147/datatable-vs-datatable-why-is-there-a-difference-and-how-do-i-make-them-w – Shakir.iti Apr 23 '17 at 16:54
  • Ok, changing these changing the ajax request too. So I corrected my API, but still having the same issue. Warning without any explanation. – Arda Oğul Üçpınar Apr 23 '17 at 16:58