Question

Right now I have the following html table:

<table id="datatable">
    <thead>
        <th>fruits</th>
        <th>vegs</th>
    </thead>
    <tbody>
        <tr>
            <td>apple</td>
            <td>potato</td>
        </tr>
        <tr>
            <td>apple</td>
            <td>carrot</td>
        </tr>
    </tbody>
</table>

And I’d like to reference the columns by name like this:

<script type="text/javascript">
$(document).ready(function() {  
    /* Init the table */
    var oTable = $('#datatable').dataTable( );

    //get by sTitle
    console.log(oTable);
    var row = oTable.fnGetData(1)
    console.log(row['vegs']);//should return 'carrot'
} );
</script>

Is there anyway to have a javascript function fnGetData() to return an object rather than an array when the datasource is DOM?

Answer 1

So, I’ve researched a bit and found the datatable plugin is not very smart at handling columns – they are always arrays needed to be accessed with an integer. The only thing that handles columns and their properties is the aoColumns object – thanks at @JustinWrobel for finding the fnSettings method to access that object after initialisation. If you haven’t had this, you were stuck with $table.find("thead th").

However, now it is easy to get the table as an array of objects:

var table = $mytable.dataTable(​…);
var cols = table.fnSettings().aoColumns,
    rows = table.fnGetData();

var result = $.map(rows, function(row) {
    var object = {};
    for (var i=row.length-1; i>=0; i--)
        // running backwards will overwrite a double property name with the first occurence
        object[cols[i].sTitle] = row[i]; // maybe use sName, if set
    return object;
});

result[1]["vegs"]; // "carrot"