Short Answer
For your specific question, you were very close with dataSrc: "accounts:account"
. Instead, it needs to be dataSrc: "accounts.account"
- using a dot instead of a colon. This is standard JavaScript dotted object notation for navigating down through the levels of a JSON structure.
So:
ajax: {
url: "./get_all_accounts.php",
dataType: "JSON", // not actually needed - will be inferred.
dataSrc: "accounts.account"
},
Longer Answer
When DataTables receives a JSON object via an ajax call, it needs the JSON to contain an array. Each item in the array needs to represent a row of data (or, at least, the raw materials for creating a row).
DataTables will handle iterating over this array for you automatically - but it may need some help from you to know where to find this array inside your JSON.
Some examples of possible JSON structures received by your ajax call:
An object containing an array of other objects:
{ "data": [ {...},{...},... ] }
An object containing an array of arrays:
{ "data": [ [...],[...],... ] }
In both these cases, the array has a name. In this case, the name is data
.
By default, this is what DataTables expects: It assumes a top-level name of "data" for the array, which is therefore the starting point for row iteration.
If the array is named something other than data
, then this is where you need to use the ajax dataSrc
option, to tell DataTables what the array's name actually is:
{ "myTableData": [ {...},{...},... ] }
$('#example').dataTable( {
"ajax": {
"url": "whatever",
"dataSrc": "myTableData"
}
} );
However, what if the JSON looks like this:
[ {...},{...},... ]
or like this:
[ [...],[...],... ]
In these cases, there is no name, so the dataSrc
options needs to reflect that:
$('#example').dataTable( {
"ajax": {
"url": "whatever",
"dataSrc": ""
}
} );
In your case, the JSON is as follows:
{
"accounts": {
"account": [{
"accountid": "2066",
"email": "Master (Blank) Defaults Acct",
"fullname": "Test",
"account_status": "Active",
"create_date": "2/19/2010 2:58:12 PM",
"last_login": "2/19/2010 3:03:43 PM",
"subscription_level": "Gold",
"license_type": "Test/Free",
"group_name": "Default Accounts"
}, {
"accountid": "2169",
"email": "Default@gmail.com"
}]
}
}
Yes, it contains an array, but the array is located at accounts.account
. This uses standard JavaScript dotted object notation to navigate from the entry point of your JSON to the location of the array. Therefore the dataSrc
option has to reflect that:
$('#example').dataTable( {
"ajax": {
"url": "whatever",
"dataSrc": "accounts.account"
}
} );
Now, you can refer to each name/value pair in each object, using the columns.data
option - like you do in the question:
columns: [
{ data: "accountid", width: "5%" },
{ data: "email" , width: "25%" },
{ data: "fullname" },
{ data: "group_name" },
{ data: "subscription_level" },
{ data: "account_status" },
{ data: "license_type" },
{ data: "create_date" }
]
Nested Row Data
Just to carry on the "dotted object notation" idea further...
As well as there being a possible nesting of the main data array, you can also have nesting of data inside each row of data - for example:
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25"
},
"contact": [
"Edinburgh",
"5421"
]
}
In this case, we can use the same dot approach to access nested column data:
"columns": [
{ "data": "name" },
{ "data": "hr.position" },
{ "data": "contact.0" },
{ "data": "contact.1" },
{ "data": "hr.start_date" },
{ "data": "hr.salary" }
]
I stole this last example from the official documentation.
Take a look at the Ajax Source Data page for some more examples.