Javascript 如何从遗留jQuery数据表中获取特定行的行id_Javascript_Jquery_Datatables

Javascript 如何从遗留jQuery数据表中获取特定行的行id

javascript jquery datatables

Javascript 如何从遗留jQuery数据表中获取特定行的行id,javascript,jquery,datatables,Javascript,Jquery,Datatables,我经历过它显示了一种检索行id的好方法 // Handle click on checkbox $('#example tbody').on('click', 'input[type="checkbox"]', function(e){ var $row = $(this).closest('tr'); // Get row data var data = table.row($row).data(); // Get row ID var rowI

我经历过

它显示了一种检索行id的好方法

// Handle click on checkbox
$('#example tbody').on('click', 'input[type="checkbox"]', function(e){
    var $row = $(this).closest('tr');

    // Get row data
    var data = table.row($row).data();

    // Get row ID
    var rowId = data[0];

但是，我需要坚持使用遗留的DataTable 1.9.4。我试着做类似的事情

$('#confirm-table').on('click', 'input[type="checkbox"]', function() {
    var $row = $(this).closest('tr');
    var data = table.fnGetData($row[0]);
    var rowId = data[0];

    // I expect to get "123" or "456". But I am getting '<input type="checkbox">'
    alert(rowId);
})

到遗留数据表代码

var data = table.fnGetData($row[0]);

然而，我得到的不是行id（“123”或“456”），而是呈现代码

你知道怎么用正确的方法做吗

下面是演示该问题的完全可行的代码

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
</head>
<body>

<table id="confirm-table">
</table>

<script>
$(document).ready(function (){
    var dataSet = [
        [ "123", "System Architect" ],
        [ "456", "Accountant" ]
    ];

    table = $('#confirm-table').dataTable( {
        aaData: dataSet,
        aoColumns: [
            { sTitle: "Id" },
            { sTitle: "Job" }
        ],
        "aoColumnDefs":[ {
            "aTargets": [0],
            "fnRender": function ( oObj ) {
                return '<input type="checkbox">';
            }
        }]
    } );

    $('#confirm-table').on('click', 'input[type="checkbox"]', function() {
        var $row = $(this).closest('tr');
        var data = table.fnGetData($row[0]);
        var rowId = data[0];

        // I expect to get "123" or "456". But I am getting '<input type="checkbox">'
        alert(rowId);
    });

});
</script>
</body>
</html>


$（文档）.ready（函数（）{
变量数据集=[
[“123”，“系统架构师”]，
[“456”，“会计师”]
];
表=$（“#确认表”）。数据表（{
aaData:dataSet，
AO列：[
{sTitle:“Id”}，
{sTitle:“作业”}
],
“aoColumnDefs”：[{
“目标”：[0]，
“fnRender”：函数（oObj）{
返回“”；
}
}]
} );
$（“#确认表”）。在（'click'，'input[type=“checkbox”]”上，函数（）{
var$row=$（this.closest（'tr'）；
var data=table.fnGetData（$row[0]）；
var rowId=数据[0]；
//我希望得到“123”或“456”，但我得到的是“
警报（rowId）；
});
});

首先，我们需要将现有的

aaData

转换为json对象。然后我们有了

ao列

来匹配

aaData

。完成后，让我们更新

aoColumnDefs

与其将

DT_RowId

列内容作为复选框呈现，不如隐藏该列，以便轻松访问

DT_RowId

数据

我没有更改您的

onClick

侦听器

下面是一个工作示例：

$（文档）.ready（函数（）{
变量数据集=[
{
“DT_RowId”：“123”，
“复选框”：“，
“作业”：“系统架构师”
},
{
“DT_RowId”：“456”，
“复选框”：“，
“职务”：“会计”
}
];
表=$（“#确认表”）。数据表（{
“bProcessing”：正确，
aaData:dataSet，
AO列：[
{“mData”：“DT_RowId”，缝合：“隐藏行Id”}，
{“mData”：“复选框”，针脚：“Id”}，
{“mData”：“job”，sTitle:“job”}//请提供一段代码？
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
</head>
<body>

<table id="confirm-table">
</table>

<script>
$(document).ready(function (){
    var dataSet = [
        [ "123", "System Architect" ],
        [ "456", "Accountant" ]
    ];

    table = $('#confirm-table').dataTable( {
        aaData: dataSet,
        aoColumns: [
            { sTitle: "Id" },
            { sTitle: "Job" }
        ],
        "aoColumnDefs":[ {
            "aTargets": [0],
            "fnRender": function ( oObj ) {
                return '<input type="checkbox">';
            }
        }]
    } );

    $('#confirm-table').on('click', 'input[type="checkbox"]', function() {
        var $row = $(this).closest('tr');
        var data = table.fnGetData($row[0]);
        var rowId = data[0];

        // I expect to get "123" or "456". But I am getting '<input type="checkbox">'
        alert(rowId);
    });

});
</script>
</body>
</html>