如何从旧版jQuery数据表中获取特定行的行ID

Question

I had gone through 我经历了

http://www.gyrocode.com/articles/jquery-datatables-checkboxes/ http://www.gyrocode.com/articles/jquery-datatables-checkboxes/

It shows a nice way to retrieve row id 它显示了一种检索行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];

However, I need to stick with legacy DataTable 1.9.4. 但是，我需要坚持使用遗留的DataTable 1.9.4。 I try to perform the similar thing. 我尝试执行类似的操作。

$('#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);
})

As you can see, what I did is I convert current DataTable code from 如您所见，我所做的是将当前的DataTable代码从

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

to legacy DataTable code 到旧的DataTable代码

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

However, instead of getting row id ("123" or "456"), I'm getting rendered code <input type="checkbox"> 但是，我没有得到行ID（“ 123”或“ 456”），而是获得了呈现的代码<input type="checkbox">

Any idea how to do it in proper way? 任何想法如何以正确的方式做到这一点？

https://jsfiddle.net/14p9uu8c/ https://jsfiddle.net/14p9uu8c/

Here's the fully workable code to demonstrate the problem 这是演示问题的完全可行的代码

<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>

Answer 1

First of all we need to convert your existing aaData to json objects. 首先，我们需要将您现有的aaData转换为json对象。 Then we have our aoColumns to match our aaData . 然后，我们有aoColumns来匹配aaData 。 After it's done lets update aoColumnDefs . 完成后，让我们更新aoColumnDefs 。

Instead of rendering our DT_RowId column content as a checkbox, lets hide our that column so we can easily access the DT_RowId data. 不要将DT_RowId列的内容显示为复选框，而是隐藏该列，以便我们可以轻松地访问DT_RowId数据。

I did not change your onClick listener. 我没有更改您的onClick侦听器。

Here is working example: 这是工作示例：

 $(document).ready(function (){ var dataSet = [ { "DT_RowId": "123", "checkbox": "", "job": "System Architect" }, { "DT_RowId": "456", "checkbox": "", "job": "Accountant" } ]; table = $('#confirm-table').dataTable( { "bProcessing": true, aaData: dataSet, aoColumns: [ { "mData": "DT_RowId" , sTitle: "Hidden row Id" }, { "mData": "checkbox" , sTitle: "Id" }, { "mData": "job", sTitle: "Job" } // <-- which values to use inside object ], "aoColumnDefs":[ { "aTargets": [0], "bVisible": false }, { "aTargets": [1], "fnRender": function ( oObj, value ) { 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">' console.log(data.DT_RowId); }); });

  <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> <table id="confirm-table"> </table>

如何从旧版jQuery数据表中获取特定行的行ID

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-04-07 11:01:24

如何从旧版jQuery数据表中获取特定行的行ID

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-04-07 11:01:24

解决方案1
2 已采纳 2017-04-07 11:01:24