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 records are stored as an array of Objects. The code is as follows:

    //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" }
            ]
});

I then fetch the data from the element and proceed to load it into the datatable. But this doens't seem to work and always returns with the error Requested unknown parameter "`Field1" from the data source at row 0. Is it possible to load data into datatables in this manner?

UPDATE:

Here is a sample of the result object array

results = 
    0: Object
       Field1: "2011/04/23"
       Field2: 8
       Field3: "Hello"
       Field4: "World"
       __proto__: Object
    1: Object
       Field1: "2011/03/25"
       Field2: 6
       Field3: "Hello"
       Field4: "Everyone"
       __proto__: Object
...etc.

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 records are stored as an array of Objects. The code is as follows:

    //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" }
            ]
});

I then fetch the data from the element and proceed to load it into the datatable. But this doens't seem to work and always returns with the error Requested unknown parameter "`Field1" from the data source at row 0. Is it possible to load data into datatables in this manner?

UPDATE:

Here is a sample of the result object array

results = 
    0: Object
       Field1: "2011/04/23"
       Field2: 8
       Field3: "Hello"
       Field4: "World"
       __proto__: Object
    1: Object
       Field1: "2011/03/25"
       Field2: 6
       Field3: "Hello"
       Field4: "Everyone"
       __proto__: Object
...etc.

• javascript
• jquery
• datatables

• Can you post the contents of 'results'? – user463535 Commented Jul 5, 2011 at 22:50
• Hi Adam, just posted a code snippet of the result object array. – kingrichard2005 Commented Jul 5, 2011 at 23:26
• The DataTables blog has a post on this. Are you using 1.8? This definitely won't work in earlier versions. – user399470 Commented Jul 6, 2011 at 17:50

3 Answers 3

Allan, the developer of DataTables, was able to answer my question in the following post in the DataTables forum. In case the link doesn't work, the issue turned out to be a simple syntax error.

Instead of "aaData": [ results ], it needs to be "aaData": results,.

Thank you for your help Allan.

Well, aaData (as it name suggests using hungarian notation) expects an array of arrays, so if you fetch him an array of objects that is why it plains.

Add to your definition the following:

$('#measTable').dataTable({
    ...
    "columns": [
        { "data": "field1" },
        { "data": "field2" },
        { "data": "field3" }
    ]
});

You should match the table columns with the columns array.

That's it!