Ajax data is not loaded into table

Change

Hey folks,
i am using DataTables Plugin (current Version) and feed it with data from an Ajax request.

When running the php-code directly i get a valid json result. Also the output in console and a div-container for debug purposes are working great.
cURL testing was also successful.
But the table is still empty.

No Error message in console.

Can you help me what i can try to debug further?

<input type="hidden" id="token" name="token" value="<?php echo encryptData($usermail);?>">
<div id="preForJSONResponse"></div>
<table id="ordertable" class="display table table-striped" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Order No.</th>
            <th>Order Date</th>
            <th>Products</th>
            <th>Delivery</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

var encodedToken = $('#token').val(); 
let table = new DataTable('#ordertable', {
    serverSide: true,
    ajax: {
        type: "POST",
        url: '/ajax/get_orders.php',
        data: {
            token: encodedToken
        },
        dataType: "json", 
        async: false,
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        success: function(jsonResponse) {
            console.log(jsonResponse);
            $("#preForJSONResponse").html('<pre>' + JSON.stringify(jsonResponse, null, 2) + '</pre>');
        },
        error: function(xhr, status, error) {
            console.log("An error occurred:", error);
            $("#preForJSONResponse").html('<pre>An error occurred: ' + error + '</pre>');
        }
    },
    autoLink: false,
    columns: [
        {
            className: 'dt-control',
            orderable: false,
            data: null,
            defaultContent: ''
        },
        { data: 'orderno' },
        { data: 'order_date' },
        { data: 'products' },
        { data: 'delivery' }
    ],        
    order: [[1, 'asc']],
    processing: true
});

[
  {
    "id": 37375,
    "orderno": 257,
    "customer_id": 15025,
    "customer_mail": "customer@domain.com",
    "products": 3,
    "order_date": "2023-08-12 08:33:05",
    "delivery": "2023-08-15 00:00:00",
    "shipping": "ups",
    "ip": "123.456.78.90"
  },
  {
    "id": 38029,
    "orderno": 258,
    "customer_id": 15025,
    "customer_mail": "customer@domain.com",
    "products": 2,
    "order_date": "2023-08-13 10:27:15",
    "delivery": "2023-08-17 00:00:00",
    "shipping": "ups",
    "ip": "123.456.78.90"
  }
]

kthorngren

The biggest issue is you are not returning the data in the data object that Datatables looks for by default. See the Ajax docs. You will need to use ajax.dataSrc to tell Datatables where to find the data. For you case use dataSrc: ''.

You have serverSide: true,. The JSON you posted doesn't have all the parameters Datatables expects to see with server side processing enabled. See the Server side processing protocol docs for details. do you need server side processing? See the processing modes docs. Client side processing is preferred unless the number of records you have causes performance issues.

Likely you will want to remove async: false,. You have the success function defined which is not supported by the ajax option. The docs state this:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

The best place to validate the JSON response is to use the browser's network inspector to see the XHR response. This will show what Datatables will receive.

Kevin