在DataTables中对fnGetData()进行未定义。

时间:2021-05-17 14:29:27

What I want is to get row data when users click on the table's tbody but I keep getting undefined for these datatables functions.

我想要的是在用户单击表的tbody时获取行数据,但对于这些datatables函数,我一直没有定义。

Data comes from a node-mysql module. And for testing purposes, after the table is initialized and data's propertly arrived I've set:

数据来自一个节点-mysql模块。为了测试目的,在表初始化和数据正确到达之后,我已经设置了:

"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]);
},

The result is this:

结果是这样的:

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] 

It's not an array... Maybe this is the weird thing.

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


I've tried debugging with chrome, setting

我试过用chrome调试,设置。

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

And here's a screenshot of what's coming from the variable oTable. I'm not sure but shouldn't I be able to see the functions right there? I can't query something like oTable.fnGetData() 'cause it's undefined.
Let me know if you need something else from my side in order for you to help me.

这是一个屏幕截图来自变量oTable。我不确定,但我能不能看到这里的函数?我不能查询像oTable.fnGetData()因为它是未定义的。如果你需要我的帮助,请告诉我。

EDIT

编辑

What I want basicaly is to get row data when users click on the table's tbody. I can't get there since oTable = $('#myTable').DataTable(); oTable.fnGetData()' throws undefined.

当用户点击表的tbody时,我想要的是获取行数据。因为oTable = $('#myTable').DataTable();oTable.fnGetData()抛出未定义。

I'll try to clarify a bit more.

我想再澄清一点。

tables_offline.js is the file that loads the datatable, there I define my oTable variable. While searching for help I came across this post (I'm using mData for the columns definition) and I'm not sure if this is the case but it may help.
I make use of fnDrawCallback just for testing oTable in the console, it's not part of the original code.

tables_offline。js是加载datatable的文件,在那里我定义了oTable变量。在搜索帮助时,我发现了这个帖子(我正在使用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
});

EDIT 2

编辑2

New screenshot after accesing oTable when a row's clicked. If I dig deep into context I see the data but it's the full thing, not just the row clicked. I'd like to use a function to get clicked row data.

当一个行被点击时,新的屏幕截图。如果我深入到context中,我看到了数据,但它是完整的,而不仅仅是点击的行。我想使用一个函数来获得点击的行数据。

1 个解决方案

#1


0  

Remove the fnDrawCallback stuff, I think it's distracting you from the actual problem.

删除fnDrawCallback的内容,我认为它会分散你对实际问题的注意力。

Try this:

试试这个:

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);
  } );

Note that the oTable var is still in scope so you don't need to use var oTable = $('#myTable').DataTable().

注意,oTable var仍然在范围内,所以您不需要使用var oTable = $('#myTable'). datatable()。

This example is copied verbatim from the Datatables API documentation

这个例子是从Datatables API文档中逐字复制的。

#1


0  

Remove the fnDrawCallback stuff, I think it's distracting you from the actual problem.

删除fnDrawCallback的内容,我认为它会分散你对实际问题的注意力。

Try this:

试试这个:

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);
  } );

Note that the oTable var is still in scope so you don't need to use var oTable = $('#myTable').DataTable().

注意,oTable var仍然在范围内,所以您不需要使用var oTable = $('#myTable'). datatable()。

This example is copied verbatim from the Datatables API documentation

这个例子是从Datatables API文档中逐字复制的。

相关文章