Server-Side Processing Response

nikkinicholasromero

Hi,

I was trying to integrate Spring MVC with DataTables when I encountered an error message. My table was not rendering any values. Hoping anybody could help.

Error Message :
DataTables warning: table id=room-table - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4

Code Snippet :

$(document).on('ready', function () {
    $("#room-table").DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "rooms/getRoomForDataTable",
            "type": "POST",
            "contentType": "application/json;charset=utf-8",
            "data": function(data) {
                return JSON.stringify(data);
            }
        }
    });
});

General : 
Request URL:http://localhost:8080/rooms/getRoomForDataTable
Request Method:POST
Status Code:200 OK
Remote Address:127.0.0.1:8080

Response Headers : 
Content-Type:application/json;charset=UTF-8
Date:Tue, 28 Jun 2016 09:16:32 GMT
Server:Jetty(9.2.16.v20160414)
Transfer-Encoding:chunked
X-Application-Context:application

Request Headers : 
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:299
Content-Type:application/json;charset=UTF-8
Host:localhost:8080
Origin:http://localhost:8080
Pragma:no-cache
Referer:http://localhost:8080/rooms
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
X-Requested-With:XMLHttpRequest

Request Payload : 
{"draw":1,"columns":[{"data":0,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":1,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

Response :
{"draw":1,"recordsTotal":2,"recordsFilter":2,"data":[{"uuid":"uuid-1","roomNumber":"room-number-1"},{"uuid":"uuid-2","roomNumber":"room-number-2"}],"error":null}

nikkinicholasromero

Changed my response field 'recordsFilter' to 'recordsFiltered' but it's still not working

Tom (DataTables)

Hi

When using objects you have to tell datatables where to get the data for each column.

This is explained in the manual here.

Thanks

Tom

nikkinicholasromero

Hi Tom,

Thanks for the response.

I changed my datatables initialization. I added the "columns" part. It now looks like this.
$("#room-table").DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "rooms/getRoomForDataTable",
"type": "POST",
"contentType": "application/json;charset=utf-8",
"data": function(data) {
return JSON.stringify(data);
}
},
"columns": [{
"data": "uuid"
},{
"data": "roomNumber"
}]
});

But the request sent to the server seems to be incorrect.
{"draw":1,"columns":[{"data":"uuid","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"roomNumber","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

Shouldn't be the "uuid" and the "roomNumber" be a value of the field "name" and not the field "data"?

nikkinicholasromero

Changing
"columns": [{
"data": "uuid"
},{
"data": "roomNumber"
}]
});

to
"columns": [{
"name": "uuid"
},{
"name": "roomNumber"
}]
});

fixed the request sent to the server. But got the same error message.

nikkinicholasromero

Hi Tom,

I noticed a difference to the response sent from the server between my work and the sample provided here.

Here's mine:
{"draw":1,"recordsTotal":2,"recordsFiltered":2,"data":[{"uuid":"uuid-1","roomNumber":"room-number-1"},{"uuid":"uuid-2","roomNumber":"room-number-2"}],"error":null}

Here's from the sample:
{"draw":1,"recordsTotal":57,"recordsFiltered":57,"data":[["Airi","Satou","Accountant","Tokyo","28th Nov 08","$162,700"],
["Angelica","Ramos","Chief Executive Officer (CEO)","London","9th Oct 09","$1,200,000"]]}

The structure of my "data" is an array of Objects. The sample from the documentation uses an array of arrays.

Please tell me there's a way to map an array of Object properly.

Thanks

nikkinicholasromero

It finally worked. I used this initialization :
$("#room-table").DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "rooms/getRoomForDataTable",
"type": "POST",
"contentType": "application/json;charset=utf-8",
"data": function(data) {
return JSON.stringify(data);
}
},
"columns": [{
"data": "uuid"
},{
"data": "roomNumber"
}]
});

I just changed my data type from the server-side to accommodate the mapping of a string "data" and an integer "data".

Tom (DataTables)

Glad you got it sorted out.

Thanks

Tom