Question

我经历过

它显示了检索行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);
})

如您所见，我所做的是从

转换当前的DataTable代码

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

到旧版DataTable代码

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

但是，我没有获取行ID（＆＃34; 123＆＃34;或＆＃34; 456＆＃34;），而是获得了代码<input type="checkbox">

知道如何以正确的方式做到这一点吗？

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

这是展示问题的完全可行的代码

<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

首先，我们需要将现有的aaData转换为json对象。然后我们将aoColumns与aaData匹配。完成后，我们可以更新aoColumnDefs。

不要将我们的DT_RowId列内容呈现为复选框，而是隐藏我们的列，以便我们可以轻松访问DT_RowId数据。

我没有更改你的onClick听众。

以下是工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: