How can I use mDataProp with a client-side (deeply nested) object?

How can I use mDataProp with a client-side (deeply nested) object?

jcreadyjcready Posts: 44Questions: 0Answers: 0
edited May 2012 in General
Maybe I missed something in the documentation, but from looking around the examples it seems like unless I'm getting the JSON object from an XHR request, I'm not allowed to use a JSON/JS object to initialize my DataTable.

The deeply nested object is coming from localStorage. I also want to use mDataProp as a function to further format the deeply nested data.

Replies

  • jcreadyjcready Posts: 44Questions: 0Answers: 0
    edited May 2012
    Nevermind, I didn't think you could pass an array of objects to aaData.

    Edit: Okay, I'm still confused how to use mDataProp as a function in aoColumnDefs without first defining what properties should be used for each column index... which you have to do in mDataProp in aoColumns. Will doing that work?
  • jcreadyjcready Posts: 44Questions: 0Answers: 0
    edited May 2012
    From http://datatables.net/ref#aaData:

    [quote][code]// Using an array of objects as a data source (mDataProp)
    $(document).ready( function () {
    $('#example').dataTable( {
    "aaData": [
    {
    "engine": "Trident",
    "browser": "Internet Explorer 4.0",
    "platform": "Win 95+",
    "version": 4,
    "grade": "X"
    },
    {
    "engine": "Trident",
    "browser": "Internet Explorer 5.0",
    "platform": "Win 95+",
    "version": 5,
    "grade": "C"
    }
    ],
    "aoColumns": [
    { "sTitle": "Engine", "mDataProp": function ( data, type, val ) {
    if (type === 'set') {
    // How to I tell DT to use "engine" as the key for this column?
    data.engine = val.engine; // Is val the "row" object from aaData?
    }

    // Do I just return "engine" to imitate using a string?
    return "engine";
    },
    { "sTitle": "Browser", "mDataProp": "browser" },
    { "sTitle": "Platform", "mDataProp": "platform" },
    { "sTitle": "Version", "mDataProp": "version" },
    { "sTitle": "Grade", "mDataProp": "grade" }
    ]
    } );
    } );[/code][/quote]
  • allanallan Posts: 63,546Questions: 1Answers: 10,476 Site admin
    It might be worth reading through this blog post: http://datatables.net/blog/Orthogonal_data - it explains in detail how to use mDataProp as a parameter.

    In answer to your questions - your mDataProp function needs to return the value that is to be used - so in this case you would return val.engine; .

    data - the data source for the whole row
    type - the data type DataTables is asking for
    val - the value to set (so data.engine = val; most likely).

    Allan
  • jcreadyjcready Posts: 44Questions: 0Answers: 0
    edited May 2012
    Thanks Allen!
This discussion has been closed.