Data from ajax serverSide and dynamic columns
Data from ajax serverSide and dynamic columns

hi,
i need to create datatables with data from server (serverSide) and with a variable number of columns, more in detail:
i have a table with always "fieldA" and "fieldB" and a variable numbers of other fileds "o1" , "o2" etc sent by server in json..
currently, my json is of the kind: "data":[{"fieldA":"somedata",
"fieldB":"somedata",
"others":{"o1":"someda","o2":"someda"}}]
with the "optional" fields as an array situated at the key "others".
the function i'm using is :
`
$('#tab').dataTable( {
"pageLength": 10,
"columns": [
{ "data": "fieldA", title: "AA"},
{ "data": "fieldB", title: "BB" },
//###############################
{ "data": "others.o1" },
{ "data": "other.o2" }
],
//###############################
"processing" : true,
"serverSide": true,
"ajax": { "url": 'myurl/getdata') ?> ',
"type": "POST"
}
`
in this simple example, i can get the actual values o1 and o2, but it's "static"... i don't know how many optional fields i will have in the array, so..what could i do?
Answers
You will need to use jQuery Ajax to first fetch the columns then in the success function initialize your Datatable with the columns and server side processing. Here is an example:
http://live.datatables.net/qimukefe/1/edit
Kevin
@kthorngren but given column names, how can i access relative values sotred as array as field of the json?
about the example you posted, is the datatables init (performing ajax) called inside the $ajax block?
Not sure I understand the question. The example I provided is using the same URL as Datatables is configured for. The reason is I don't have control of the server side so this is the data I get. You don't need to use the same URL and probably don't want to as it is returning all the row data. You will want to create a different URL that just responds with the column definitions you want. The point is that you have to do this before you initialize Datatables.
Kevin
supposing (same endpoint) the server sent a json composed of:
"data" = fieldKey1: fieldValue1, fieldKey2: fieldValue2, arrayKey : (optFieldname: optvalue )
and, in the same json response i directly put another entry
"fields" = uselessKey1 : nameofoptionalfield1, uselesskey2 : nameofoptionalfield2 ...
how would the column definition in the first ajax change ?
sorry for the bad quality json explanation
in addition, " coloumns : columns " in the datatables init won't work because data:columnnames[i] doesn't specify that that field is contained in a array...
I'm assuming you are referring to my example. If so I updated it with comments that will hopefully help:
http://live.datatables.net/qimukefe/17/edit
Note that it is
push
ing eachcolumns.data
andcolumns.title
object onto the array.data:columnnames[i]
is an index into columnNames to get the specific name for that specific column.I'm not sure if I'm answering your question. Maybe you can provide a specific example of the column information you expect to be returned from your server.
I'm not sure I'm clear on what this is used for in your example:
Is it the row data? if so that is not what you want. My example uses the row data because its the only data available in the live.datatables.net environment. You will want a request that just fetches the column definitions then parse it into an array that can be used with
columns
.Kevin
thanks for your patience @kthorngren , you are answering my question but you are missing a point, i understand in your example you are listing all the fields based on the content of the first item in data, for example
first_name: "Garrett",
last_name: "Winters",
office: "Tokyo",
and you get first_name, last_name and office stored in columns variable, but in my case there is a field (for example "jobs") that has not a single value (like Tokyo, or Garrett) but is an array of key-value pairs that have to became columns, for example:
first_name: "Garrett",
last_name: "Winters",
office: "Tokyo",
jobs : { job1: farmer, job2: doctor }
and i don't know how to represent that in the columns variable that you defined....
Hopefully this example for nested objects will help:
https://datatables.net/examples/ajax/deep.html
Kevin
yes, @kthorngren it helps, that's my situation, now, my fields in the array are not fixed, so i don't know how many will be, how can i set columns dinamically then?
i tried to use the method in your first example and concatenate array key and field key but it seems not to work
This is not a Datatables specific issue. If you have nested objects then simply using the Javascript keys() method is not going to work as I believe it will only provide the first level keys. You will need to create the code to iterate the nested object and pull the kets or values that you want. You may find an example of what you need on Stackoverflow or some other site.
Kevin