In order to work, why does the AJAX array need to be called 'data" in the "Child rows example"?

FernandoRoldan

I would like to load data into a DataTable using "Child rows" attached to a parent table from a MongoDB data source. MongoDb allows for embedded documents as arrays and/or JSON objects. Some of that data will have the same structure as the sample AJAX used in the "Child rows" example page, with the exception that the name "data" might be "subcontractor" or "manager" instead . The following shows the start of the example AJAX with the name "data":

"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}

I have no problems using the example JavaScript and AJAX data as long I don't modify the spelling for the name "data" in the source data. When I tried changing "data" to "subcontractor" or "data2" the DataTable wouldn't work. I tried modifying the JavaScript below by changing any reference to "data" to "subcontractor" or "data2" with no results. What do I need to change in the sample JavaScript below to use a different name than "data" in my source JSON?

$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );

This is the link to the"Child rows" sample page:

https://datatables.net/examples/api/row_details.html

kthorngren

You can use the ajax.dataSrc option to change where Datatables looks for the data.

Kevin

FernandoRoldan

I used the ajax.dataScr option as in the following and it didn't work:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../ajax/data/objects.txt",
        "dataSrc": "staff",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "defaultContent": ''
            },
            { "staff": "name" },
            { "staff": "position" },
            { "staff": "office" },
            { "staff": "salary" }
        ],
        "order": [[1, 'asc']]
    } );

I also changed the AJAX data to the following:

{
  "staff": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },

Again if I used the default "data" value in the AJAX data source I had no problems but if I used "staff" it wouldn't work. Any suggestions?

colin

Hi @FernandoRoldan ,

In your first code, lines 11 to 14 should read {"data":"name"}, not "staff". Whatever you set for the ajax.dataSrc, it is always columns.data,

Cheers,

Colin

FernandoRoldan

Hi @colin,

I had already tried setting lines 11 to 14 to read {"data":"name"}, and that didn't work either.

Oddly enough, the same code as below with lines 11 to 14 set to {"data": "name" }, as you have suggested worked only if the object property in the AJAX source was set to "data".

I say it is odd, only because the code worked even though "dataScr" was set to "staff".

$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"dataSrc": "staff",
"columns": [
{
"className": 'details-control',
"orderable": false,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );

I love using the DataTables plugin and I have no problems using "data" as the default object property if I'm using a relational database; although I am having second thoughts on using it with a document database. A single MongoDB document can have multiple embedded objects where each object will have its own unique property name.

Has anyone been able to use the source data in objects.txt that was provided in the "Child rows" example without using "data" as the default object property? If you have, can you provide a JavaScript example?

Thanks,
Fernando

kthorngren

Oddly enough, the same code as below with lines 11 to 14 set to {"data": "name" }, as you have suggested worked only if the object property in the AJAX source was set to "data".

I say it is odd, only because the code worked even though "dataScr" was set to "staff".

I'm confused by this comment. Just to clarify you are able to use dataSrc set to staff and it works, correct?

I have no problems using "data" as the default object property

When you say "default object property" are you referring to the the columns.data config option? If so then that is what Datatables uses to know the names of the objects being returned. The key of data in this context has no relation to the data object being loaded into datatables. Its just a config option like columns.title.

Kevin

allan

The dataSrc property needs to be a property of the ajax object. What you currently have:

"ajax": "../ajax/data/objects.txt",
"dataSrc": "staff",

will be ignored by DataTables. Use:

ajax: {
  url: "../ajax/data/objects.txt",
  dataSrc: "staff"
}

See the ajax.dataSrc documentation for more details.

Allan

FernandoRoldan

@Allan,

That did it!

Thank you,
Fernando