unable to create a dynaTable with Ajax

Kaashaan

hi,

I have not much exposure to jQuery plug-ins. I am trying to create a dataTable grid. However, the data does not load in table. All the cells get 'undefined' values. Below are the sample configurations:

HTML:
//used these js files

Distance EstablishmentId EstablishmentType EstablishmentTypeId Location MinCost Name StarType Stars TrpRating UserRating UserRatingCount

JS:
$(document).ready(function() {
$.ajax({
type:'GET',
contentType: "application/json; charset=utf-8",
url: 'test.json',
data: "{}",
dataType: "json",
success: function(data){
var dynatable = $('#my-ajax-table').dynatable({
dataset: {
records: data.Establishments
}
}).data("dynatable");
dynatable.settings.dataset.originalRecords = data.Establishments;
dynatable.process();
},
error: function (result) {
console.info(result);
}
});
});

test.json:
{
"AvaSeId":"a1dc026",
"Establishments":[
{
"Distance":"1.7640740806812176",
"EstablishmentId":"118164",
"EstablishmentType":"Hotel",
"EstablishmentTypeId":"1",
"Location":"Paris",
"MinCost":"1687.71",
"Name":"Brighton",
"StarType":"1",
"Stars":"4",
"TrpRating":"463414",
"UserRating":"8.5",
"UserRatingCount":"10"
}
]
}

I would like to know what am I doing wrong with the configuration.

Thanks,
Kaashaan

tangerine

This is the DataTables site. You are using DynaTable.

Kaashaan

Hi Tangerine,

I tried with dataTable as well. The issue is if the name, in 'name:value' pair of JSON, starts with capital letter, then dataTable does not populate. For e.g., this JSON does not work
{
"MyRecords": [
{
"Name": "Tiger Nixon",
"Position": "System Architect",
"Salary": "$320,800",
"Start_date": "2011/04/25",
"Office": "Edinburgh",
"Extn": "5421"
},
{
"Name": "Garrett Winters",
"Position": "Accountant",
"Salary": "$170,750",
"Start_date": "2011/07/25",
"Office": "Tokyo",
"Extn": "8422"
}
]
}
With this JSON, I get an error 'f is undefined'. However, if I change the change the JSON to below one, it starts working:
{
"data": [
{
"name": "Tiger Ni",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]
}

My JS code to bind JSON data with dataTable is:
$(document).ready(function() {
$('#example').dataTable({
"ajax": "test.json",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
});
Can you please help me with this?

Thanks,
Kaashaan

allan

Use the ajax.dataSrc option to tell DataTables to read the data from MyRecords rather than the default data location.

Allan