数据表中的未定义对象

Question

Have a datatable and using the drill down row. The top row populate data but the link to drill down to the additional row contains a undefined object and I'm stuck right there.

Any help would be so appreciated. oData.code (undefinded) / oData itself will return everything from the linq query but when I start using the oData.etc... the object becomes undefined. Even in the click event I've tried to access oData and drop it in the second TD row and it to is also undefined.

function fnFormatDetails(oTable, nTr) 
{
    var oData = oTable.fnGetData(nTr);

    var sOut =
        '<div>' +
        '<table>' +
        '<tr><td> '+oData.code+' </td><td>  </td><td> </td><td>  </td><td>  </td><td>  </td><td>  </td></tr>'
        '</table>' +
        '</div>';                           

        return sOut;
} //end fnFormatDetails function


$(document).ready(function () 
{
    var anOpen = [];
    var oTable = $('#VADataTable').dataTable(
    {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools":
        {
            "sSwfPath": "/swf/copy_csv_xls_pdf.swf"
        }, //flash must be enabled
        "iDisplayLength": 5, //defalut amount of rows shown on page                
        "bServerSide": false, //uses sever for filter curently turned off                                                
        "bFilter": false, //makes columns clickable to filter 
        "bProcessing": true,
        "bserverSide":false,
        "bJQueryUI": true, //enables user interface 
        "bSort": true, //sorting for columns                               
        "bScrollInfinite": true, //using this takes away ddl of selection
        "sAjaxSource": "Data/IndustryTable",   //where ajax commands renders results                
        "sScrollY": "200px",
        "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bScrollCollapse": true,
        "fnRowCallback": function (nRow, aData) 
        {
            if (aData[0] == "") 
            {
                $('td:eq(0)', nRow).html("+").addClass('control');
            }
            return nRow;
        }, //ends fnRowCallback

        "aoColumns":
        [
            { "sName": "code", "sTitle": "Code" },
            { "sName": "code" },
            { "sName": "data" },
            { "sName": "data" },
            { "sName": "data" },
            { "sName": "data" },
            { "sName": "data" }
        ]
    });

    $('#VADataTable td.control').live('click', function () 
    {
        var nTr = this.parentNode;
        var i = $.inArray(nTr, anOpen);

        if (i === -1) 
        {
            $('td').attr('+');
            var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
            $('div', nDetailsRow).slideDown();
            anOpen.push(nTr);
        } //end if
        else 
        {
            $('td').attr('-');
            $('div', $(nTr).next()[0]).slideUp(function () 
            {
                oTable.fnClose(nTr);
                anOpen.splice(i, 1);
            }); //ends slideUp
        } //ends else
        $('#new tr').after('<td> '+ typeof(oTable.code) +' </td>');

    }); //ends click event
} //ends live event        
)//ends ready function

Answer 1

I believe that just add the "mData" property in "aoColumns", that is the name of fields of database table, and in "fnRowCallback" you must replace "aData[0]" by "aData['code']" like the next example:

"fnRowCallback": function (nRow, aData) 
    {
        if (aData['code'] == "") 
        {
            $('td:eq(0)', nRow).html("+").addClass('control');
        }
        return nRow;
    }, //ends fnRowCallback

    "aoColumns":
    [
        { "mData" : "code", "sName": "code", "sTitle": "Code" },
        { "mData" : "code", "sName": "code" },
        { "mData" : "data", "sName": "data" },
        { "mData" : "data", "sName": "data" },
        { "mData" : "data", "sName": "data" },
        { "mData" : "data", "sName": "data" },
        { "mData" : "data", "sName": "data" }
    ]