jQuery DataTables loading a client-side array of objects

Question

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.

Hi Adam, just posted a code snippet of the result object array. — kingrichard2005
– 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
– user399470, Commented Jul 6, 2011 at 17:50

kingrichard2005 · Accepted Answer · 2011-07-06 17:48:48Z

5

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.

answered Jul 6, 2011 at 17:48

kingrichard2005

7,31921 gold badges90 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicola Peluchetti · Accepted Answer · 2011-07-06 08:05:30Z

1

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 complains.

answered Jul 6, 2011 at 8:05

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Comments

Pablo Ezequiel Leone · Accepted Answer · 2014-05-22 15:35:37Z

0

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!

answered May 22, 2014 at 15:35

Pablo Ezequiel Leone

1,39718 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery DataTables loading a client-side array of objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related