Load objects from data attached to DOM element

kingrichard2005

Hello, I'm using the .data() function in jQuery to attach a set of records, returned from the server, to a DOM element on my page. The reords are stored as an array of Objects. The code is as follows:

[code]
//Attached returned data to an HTML table element
$('#measTable').data('resultSet', resultSet);

//Get stored data from HTML table element
var results = $('#measTable').data('resultSet');

//Construct the measurement table
data_table = $('#measTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bDeferRender": true,
"aaData": [ results ],
"aoColumns": [
{ "mDataProp": "Field1" },
{ "mDataProp": "Field2" },
{ "mDataProp": "Field3" },
{ "mDataProp": "Field4" }
]
});

[/code]

Is it possible to load data into datatables in this manner?

allan

It should be - what is the data structure of "results" (i.e. dump it to console with console.dir)?

Allan

kingrichard2005

Hi allan, thank you for getting back to me, this problem has had me stumped all weekend. The data structure is as follows:

[code]
results =
0: Object
Field1: "2011/04/23"
Field2: 8
Field3: "Hello"
Field4: "World"
__proto__: Object
1: Object
Field1: "2011/03/25"
Field2: 6
Field3: "Yo"
Field4: "Whatsup"
__proto__: Object
2: Object
Field1: "2011/03/25"
Field2: 3
Field3: "Hello"
Field4: "Everyone"
__proto__: Object
...etc.
[/code]

I don't know if it has to do with how I'm passing the array or if I have the parameters setup incorrectly. I can pass individual elements manually, i.e. "aaData": [ results[0], result[1], result[2] ], and it will render fine. But, when I run the above code I get the error: [quote]DataTables warning (table id = 'measTable'): Requested unknown parameter 'Field1' from the data source for row 0[/quote]. I was reading your article about deep property reading, If I configured the "aoColumns" property like so:

[code]"aoColumns": [
{ "mDataProp": "0.Field1" },
{ "mDataProp": "0.Field2" },
{ "mDataProp": "0.Field3" },
{ "mDataProp": "0.Field4" }
][/code]

Then it will work fine in grabbing the field parameters for the first object element in the array. Is there a notation that I can set in the "aoColumns" property that will tell DataTables to read one level deep for every element instead of the just the first one? Thanks again for your time.

allan

Looks like you are very close with what you've got - it's just this one line which is messing things up:

[code]
"aaData": [ results ],
[/code]

Your "results" is already an array of data - which is what aaData is expecting. So you don't need to wrap it up in another array. This should do the job for you (with your original mDataProp values of "FieldX" - they looked fine):

[code]
"aaData": results,
[/code]

Allan

kingrichard2005

Allan, thank you so much, that did the trick. Also, thank you for the quick response. One last question if I may, for the "aoColumns" property is it possible to pass in an array of column mappings instead of hard coding it as I have it above? For example, I have the following array structure that is built dynamically:

[code]
var colMap = new Array();
//Build column names array
$(namesParam).each(function(){
colMap.push("\"mDataProp\": \"" + this + "\"");
});

var colMap =
0: ""mDataProp": "Field1""
1: ""mDataProp": "Field2""
2: ""mDataProp": "Field3""
3: ""mDataProp": "Field4""
length: 4
__proto__: Array[0] [/code]

and in the DataTable configuration I tried both of the following configurations:
[code]
"aoColumns": colMap

//Also tried this
"aoColumns": [ colMap ]
[/code]

But I get a similar error as I did above, i.e. [quote]DataTables warning (table id = 'measTable'): Requested unknown parameter '0' from the data source for row [/quote]. Thanks again for your help and insight.

allan

You certainly should be able to. Something like this:

[code]
var cols = [
{ "mDataProp": "Field1" },
{ "mDataProp": "Field2" },
{ "mDataProp": "Field3" },
{ "mDataProp": "Field4" }
]

//Attached returned data to an HTML table element
$('#measTable').data('resultSet', resultSet);

//Get stored data from HTML table element
var results = $('#measTable').data('resultSet');

//Construct the measurement table
data_table = $('#measTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bDeferRender": true,
"aaData": results,
"aoColumns": cols
});
[/code]

Should do the trick. You can then build up 'cols' as you would a normal JS array.

Allan