如何從舊版jQuery數據表中獲取特定行的行ID

Question

我經歷了

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

它顯示了一種檢索行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（“ 123”或“ 456”），而是獲得了呈現的代碼<input type="checkbox">

任何想法如何以正確的方式做到這一點？

https://jsfiddle.net/14p9uu8c/

這是演示問題的完全可行的代碼

<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偵聽器。

這是工作示例：

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