Load objects from data attached to DOM element

Load objects from data attached to DOM element

kingrichard2005kingrichard2005 Posts: 7Questions: 0Answers: 0
edited July 2011 in General
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?

Replies

  • allanallan Posts: 63,573Questions: 1Answers: 10,482 Site admin
    It should be - what is the data structure of "results" (i.e. dump it to console with console.dir)?

    Allan
  • kingrichard2005kingrichard2005 Posts: 7Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,573Questions: 1Answers: 10,482 Site admin
    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
  • kingrichard2005kingrichard2005 Posts: 7Questions: 0Answers: 0
    edited July 2011
    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.
  • allanallan Posts: 63,573Questions: 1Answers: 10,482 Site admin
    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
This discussion has been closed.