在DataTables中为fnGetData()获取未定义的内容

时间:2014-07-30 15:25:01

标签: datatables jquery-datatables

我想要的是在用户点击表格的时候获取行数据,但我不断获得这些undefined函数的datatables

数据来自node-mysql模块。为了测试目的,在table初始化并且数据已经到达之后,我设置了:

"fnDrawCallback" : function() {
        console.log('this:' + this);
        console.log('oTable.fnGetData():' + oTable.fnGetData());
        console.log('JSON.stringify(oTable.fnGetData():' + JSON.stringify(oTable.fnGetData()));
        console.log('JSON.stringify(oTable.fnGetData():' + JSON.stringify(oTable.fnGetData()[0]));
        console.log('oTable.fnGetData()[0]:' + oTable.fnGetData()[0]);
},

结果如下:

this:[object Object] tables_offline.js:40
oTable.fnGetData():[object Object],[object Object],[object Object] tables_offline.js:41
JSON.stringify(oTable.fnGetData():[{"id":1,"age":"23","vol":26227,"tlg":4.93,"r":18.15},{"id":2,"age":"13","vol":6378,"tlg":3.97,"r":16.76},{"id":3,"age":"54","vol":131626,"tlg":6.49,"r":11.1}] tables_offline.js:42
JSON.stringify(oTable.fnGetData()[0]:{"id":1,"age":"23","vol":26227,"tlg":4.93,"r":18.15} tables_offline.js:43
oTable.fnGetData()[0]:[object Object] 

这不是一个数组...也许这是奇怪的事情。


我已尝试debugging chrome,设置

$('#myTable').on('click', 'tr', function(){ 
    var oTable = $('#myTable').DataTable();
    debugger;
});

这是来自变量oTable的{​​{3}}。我不确定但是我不应该在那里看到functions吗?我无法查询类似oTable.fnGetData()'的内容,因为它是undefined 如果您需要我身边的其他东西以便您帮助我,请告诉我。

修改

我想要基本的是当用户点击表格row data时获得tbody。我无法到达那里,因为oTable = $('#myTable').DataTable(); oTable.fnGetData()'抛出未定义。

我会尝试澄清一点。

tables_offline.js是加载datatable的文件,我在其中定义了oTable变量。在搜索帮助时,我遇到了这个screenshot(我正在使用mData作为列定义),我不确定是否是这种情况,但它可能会有所帮助。
我只是在控制台中使用fnDrawCallback来测试oTable,它不是原始代码的一部分。

var oTable = $("#myTable").dataTable({                                           
        'fnServerParams': function (aoData) {
            aoData.push({ "name": "startDate", "value": startDate });
            aoData.push({ "name": "endDate", "value": endDate });
        },
        'sAjaxSource':  '/url',
        'sAjaxDataProp': '',
        'bProcessing': true,                        
        'sDom':'t',       
        "aoColumns": [                              
                { "bVisible": false, "mDataProp": "pcrc_id"},
                { "sWidth": "25%","sTitle": "age", "mDataProp": "pcrc"},
                { "sWidth": "25%","sTitle": "Vol", "mDataProp": "volumen"},
                { "sWidth": "25%","sTitle": "tlg", "mDataProp": "tlg"},
                { "sWidth": "25%","sTitle": "r", "mDataProp": "reitero",
                        "mRender": function ( data, type, full ) {                                               
                                    return data + '%';
                            } 
                    }
        ],              
        "oLanguage": {
                "sUrl": "/javascripts/i18n/dataTables.Spanish.json"
        },                 
        "aaSorting": [[ 0, "desc" ]],
        "bSort": false,
        "bInfo" : false,                                
        "bPaginate": false,
        "fnDrawCallback" : function() {
        console.log('this:' + this);
        console.log('oTable.fnGetData():' + oTable.fnGetData());
        console.log('JSON.stringify(oTable.fnGetData():' + JSON.stringify(oTable.fnGetData()));
        console.log('JSON.stringify(oTable.fnGetData()[0]:' + JSON.stringify(oTable.fnGetData()[0]));
        console.log('oTable.fnGetData()[0]:' + oTable.fnGetData()[0]);
    },
        "bFilter": false
});

编辑2

单击一行后访问oTable后的

post。如果我深入研究context我会看到数据,但这是完整的事情,而不仅仅是点击的行。我想使用一个函数来获取点击的行数据。

1 个答案:

答案 0 :(得分:0)

删除fnDrawCallback的东西,我认为这会分散您对实际问题的注意力。

试试这个:

var oTable = $("#myTable").dataTable({                                           
        'fnServerParams': function (aoData) {
            aoData.push({ "name": "startDate", "value": startDate });
            aoData.push({ "name": "endDate", "value": endDate });
        },
        'sAjaxSource':  '/url',
        'sAjaxDataProp': '',
        'bProcessing': true,                        
        'sDom':'t',       
        "aoColumns": [                              
                { "bVisible": false, "mDataProp": "pcrc_id"},
                { "sWidth": "25%","sTitle": "age", "mDataProp": "pcrc"},
                { "sWidth": "25%","sTitle": "Vol", "mDataProp": "volumen"},
                { "sWidth": "25%","sTitle": "tlg", "mDataProp": "tlg"},
                { "sWidth": "25%","sTitle": "r", "mDataProp": "reitero",
                        "mRender": function ( data, type, full ) {                                               
                                    return data + '%';
                            } 
                    }
        ],              
        "oLanguage": {
                "sUrl": "/javascripts/i18n/dataTables.Spanish.json"
        },                 
        "aaSorting": [[ 0, "desc" ]],
        "bSort": false,
        "bInfo" : false,                                
        "bPaginate": false,
        "bFilter": false
});

oTable.$('tr').click( function () {
    var data = oTable.fnGetData( this );
    console.log(data);
  } );

请注意,oTable var仍在范围内,因此您无需使用var oTable = $('#myTable').DataTable()

此示例将从Datatables API documentation

逐字复制