server side processing stuck at "processing" after ordering

ahrboktrexon

Hi guys,
I have a problem with datatable, server-side processing.
I have a lot of data, so server-side processing is needed to display them properly.
The first rendering of the datatable is ok, but when I try to change order by column I'm stuck at "processing", sever side call is done properly, data are returned, but nothing happens on the already displayed table.

This is my code, any help?

$('#tbl_orders').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "ajax.php?act=Orders&method=GetOrders"
                , "contentType": "application/json; charset=utf-8"
                , "dataType": 'json'
                , "dataSrc": function ( json ) {
                    json.draw = json.data.draw;
                    json.recordsTotal = json.data.recordsTotal;
                    json.recordsFiltered = json.data.recordsFiltered;
                    return json.data.data;
                }
                , "dataFilter": function(reps) {
                    return reps;
                }, "error":function(err){
                    console.log(err);
                }
            }
            , "order": [[ 1, "desc" ]]
            , "columns": [
                {
                    "data": "ch"
                    , 'name': 'channel'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
                , {
                    "data": "dp"
                    , 'name': 'date_purchased'
                }
                , {
                    "data": "oId"
                    , 'name': 'order_id'
                }
                , {
                    "data": "sn"
                    , 'name': 'shipping_name'
                }
                , {
                    "data": "pr"
                    , 'name': 'products'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
                , {
                    "data": "st"
                    , 'name': 'order_status'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
                , {
                    "data": "sch"
                    , 'name': 'email_scheduled'
                    , "render": function ( data, type, row, meta ) {
                        return data;
                    }
                }
            ]
            , "colReorder": true
        });

Thank you

colin

Hi @ahrboktrexon ,

It would normally do that when the returned JSON isn't in the expected format. The best bet is to look at the Ajax tab on this page here, and compare the return with your server side script.

Cheers,

Colin

ahrboktrexon

Hi @colin,
thank you for your reply, consider that server side processing is true. I modified the server side code for simplifying degug, so only one record is returned. This is first reply

{
  "class": "Orders",
  "method": "GetOrders",
  "error_description": "",
  "data": {
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": [
      {
        "DT_RowId": "row_1",
        "oId": "123-456789-000000",
        "ch": "it",
        "dp": "2018-11-14 08:58:58",
        "st": "Pending",
        "sn": "",
        "pr": [
          {
            "asin": "123123123",
            "q": 1,
            "pt": "some text"
          }
        ],
        "sch": []
      }
    ]
  }
}

After clicking on column for ordering ajax reply is the same:

{
  "class": "Orders",
  "method": "GetOrders",
  "error_description": "",
  "data": {
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": [
      {
        "DT_RowId": "row_1",
        "oId": "order_id",
        "ch": "it",
        "dp": "2016-10-24 21:15:45",
        "st": "Shipped",
        "sn": "Name",
        "pr": [
          {
            "asin": "123123123",
            "q": 1,
            "pt": "some text"
          }
        ],
        "sch": []
      }
    ]
  }
}

colin

Hi @ahrboktrexon ,

If you look at the serverSide example here, on the Ajax tab you'll see that draw, recordsTotal are in the top level of the JSON object, and, that draw value increments with every response. Both of these will give you problems. The protocol for serverSide processing is here.

Cheers,

Colin

ahrboktrexon

Hi @Colin,
you can see that subfields are handled by

, "dataSrc": function ( json ) {
    json.draw = json.data.draw;
    json.recordsTotal = json.data.recordsTotal;
    json.recordsFiltered = json.data.recordsFiltered;
    return json.data.data;
}

It seems that dataTable calls dataSrc function only when table is redered for the first time.

kthorngren

The ajax.dataSrc is called each time there is an ajax request. The problem looks to be your return statement. The return statement is only returning the data but not the draw end record info. I think your code should look more like this:

, "dataSrc": function ( json ) {
    json.draw = json.data.draw;
    json.recordsTotal = json.data.recordsTotal;
    json.recordsFiltered = json.data.recordsFiltered;
    json.data = json.data.data;
    return json;
}

You might consider using a new variable so that the returned data is not doubled.

, "dataSrc": function ( json ) {
   var data = {};
    data.draw = json.data.draw;
    data.recordsTotal = json.data.recordsTotal;
    data.recordsFiltered = json.data.recordsFiltered;
    data.data = json.data.data;
    return data;
}

Kevin

ahrboktrexon

Thank you kevin, your suggestion solved the problem... only a fix required

, "dataSrc": function ( json ) {
   var data = {};
    data.draw = json.data.draw;
    data.recordsTotal = json.data.recordsTotal;
    data.recordsFiltered = json.data.recordsFiltered;
    data.data = json.data.data;
    return data.data; //note this
}

Thank you for your help

ahrboktrexon

My reply was too soon :-( something strange is happening
this version fixes ordering of columns but breaks pagination

, "dataSrc": function ( json ) {
    var data = {};
    data.draw = json.data.draw;
    data.recordsTotal = json.data.recordsTotal;
    data.recordsFiltered = json.data.recordsFiltered;
    data.data = json.data.data;
    return data.data; 
}

instead, the following code fixes first rendering and pagination but breaks ordering, stuck ad processing...

, "dataSrc": function ( json ) {
    json.draw = json.data.draw;
    json.recordsTotal = json.data.recordsTotal;
    json.recordsFiltered = json.data.recordsFiltered;
    json.data = json.data.data;
    return json.data;
}

Any help?

ahrboktrexon

nevermind.... my fault, everything works fine with

, "dataSrc": function ( json ) {
    var data = {};
    data.draw = json.data.draw;
    data.recordsTotal = json.data.recordsTotal;
    data.recordsFiltered = json.data.recordsFiltered;
    data.data = json.data.data;
    return data.data; //note this
}

Thank you again for your precious help!