When using Ajax with jQuery DataTables, how do I determine what to do with the data returned?

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": "[email protected]"
        }]
    }
}

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.