如何在行单击时获取数据表的 ID答案

【问题标题】：How to get ID of dataTable on row click如何在行单击时获取数据表的 ID
【发布时间】：2015-01-29 22:30:03
【问题描述】：

我有这个代码：

   $('#example').dataTable({
                "ajax": "getN.php",
                paging: false,

                "columns": [{
                        "data": "ID"
                    }, {
                        "data": "naziv"
                    }, {
                        "data": "ha"
                    },
                    {
                        "data": "ar"
                    },
                    {
                        "data": "m2"
                    },
                    {
                        "data": "lokacija"
                    },
                    {
                        "data": "osnov"
                    },
                    {
                        "data": "kat_kul"
                    },
                    {
                        "data": "akcija"
                    }
                ],
                "columnDefs": [
                        {
                    "targets": 8,
                    "data": "akcija",
                    "render": function(data, type, full, meta) {
                        // return data; 
                        return '<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button class="btn btn-info openDelete" data-toggle="modal" data-target="#delete">Izvestaj o parceli</button> <i  id="openDelete" data-toggle="modal" data-target="#delete" class="fa fa-times openDelete"></i></div>';
                    }
                },
                        {
                    "targets": 0,
                    "visible":false
                        }
]
            });

我的 getN.php 生成此代码：

{"data":[{"ID":"3","0":"3","naziv":"Vocnjak N","1":"Vocnjak N","ha":"1","2":"1","ar":"1","3":"1","m2":"57","4":"57","lokacija":"iznad brdo","5":"iznad brdo","osnov":"zakup zemlje","6":"zakup zemlje","kat_kul":"vocnjak","7":"vocnjak"},{"ID":"27","0":"27","naziv":"test","1":"test","ha":"2","2":"2","ar":"2","3":"2","m2":"0","4":"0","lokacija":"1 p","5":"1 p","osnov":"komesacija","6":"komesacija","kat_kul":"vinograd","7":"vinograd"},{"ID":"82","0":"82","naziv":"sdf","1":"sdf","ha":"0","2":"0","ar":"2","3":"2","m2":"0","4":"0","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"81","0":"81","naziv":"mm","1":"mm","ha":"7","2":"7","ar":"7","3":"7","m2":"7","4":"7","lokacija":"NS","5":"NS","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"70","0":"70","naziv":"Moja parcela 2","1":"Moja parcela 2","ha":"3","2":"3","ar":"2","3":"2","m2":"3","4":"3","lokacija":"subotica","5":"subotica","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"vinograd","7":"vinograd"},{"ID":"80","0":"80","naziv":"ss","1":"ss","ha":"1","2":"1","ar":"4","3":"4","m2":"4","4":"4","lokacija":"Pancevo","5":"Pancevo","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"ribnjak","7":"ribnjak"},{"ID":"94","0":"94","naziv":"minus","1":"minus","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"95","0":"95","naziv":"asd","1":"asd","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"asdasd","5":"asdasd","osnov":"ustupljeno na koriscenje","6":"ustupljeno na koriscenje","kat_kul":"njiva","7":"njiva"},{"ID":"120","0":"120","naziv":"pera","1":"pera","ha":"32","2":"32","ar":"0","3":"0","m2":"0","4":"0","lokacija":"23","5":"23","osnov":"zakup zemlje","6":"zakup zemlje","kat_kul":"njiva","7":"njiva"},{"ID":"122","0":"122","naziv":"TESTiranje add","1":"TESTiranje add","ha":"2","2":"2","ar":"3","3":"3","m2":"2","4":"2","lokacija":"sdfsdf","5":"sdfsdf","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"123","0":"123","naziv":"asd","1":"asd","ha":"3","2":"3","ar":"4","3":"4","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"124","0":"124","naziv":"asd","1":"asd","ha":"3","2":"3","ar":"4","3":"4","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"125","0":"125","naziv":"YESSSS","1":"YESSSS","ha":"0","2":"0","ar":"9","3":"9","m2":"5","4":"5","lokacija":"nema","5":"nema","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"vocnjak","7":"vocnjak"},{"ID":"126","0":"126","naziv":"nn","1":"nn","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"127","0":"127","naziv":"aaa","1":"aaa","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"128","0":"128","naziv":"bbb","1":"bbb","ha":"2","2":"2","ar":"2","3":"2","m2":"2","4":"2","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"129","0":"129","naziv":"gg","1":"gg","ha":"4","2":"4","ar":"4","3":"4","m2":"4","4":"4","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"130","0":"130","naziv":"fff","1":"fff","ha":"3","2":"3","ar":"3","3":"3","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"131","0":"131","naziv":"www","1":"www","ha":"2","2":"2","ar":"2","3":"2","m2":"3","4":"3","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"132","0":"132","naziv":"uuuu","1":"uuuu","ha":"4","2":"4","ar":"4","3":"4","m2":"4","4":"4","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"133","0":"133","naziv":"qqq","1":"qqq","ha":"5","2":"5","ar":"5","3":"5","m2":"5","4":"5","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"134","0":"134","naziv":"kkk","1":"kkk","ha":"8","2":"8","ar":"8","3":"8","m2":"8","4":"8","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"135","0":"135","naziv":"ooo","1":"ooo","ha":"9","2":"9","ar":"9","3":"9","m2":"9","4":"9","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"},{"ID":"136","0":"136","naziv":"ppp","1":"ppp","ha":"5","2":"5","ar":"6","3":"6","m2":"5","4":"5","lokacija":"","5":"","osnov":"vlasnistvo","6":"vlasnistvo","kat_kul":"njiva","7":"njiva"}]}

如您所见，我隐藏了数据表中的第一列，并且该值在我的数据库中是 (ID)……但现在我需要一种方法来获取它。怎么样？

我需要从点击行的 1. 列获取数据 - 获取 ID，因为我需要更新数据库中的数据并且我需要点击行的 ID。有什么想法吗？

另外，我如何从点击的行中访问所有值？等等。

只是想法：clickedRow.data.Id、clickedRow.data.naziv 等等……有什么办法吗？

【问题讨论】：

在表格中添加一个“onclick=myFunction(event)”，然后在函数“myFunction(event)”中的“event.target”中你应该有点击行的所需信息，您的身份证件。

标签： javascript jquery html datatable datatables

【解决方案1】：

这里有一个简单的例子，你可以参考

http://jsfiddle.net/zy65agrt/2/

HTML

<table id="tableId">
    <tr>
        <td>
            1
        </td>
        <td>
            <button class="row-button" >show Id</button>
        </td>
    </tr>
    <tr>
        <td>
            2
        </td>
        <td>
            <button class="row-button" >show Id</button>
        </td>
    </tr>
</table>

jQuery

$(document).ready(function(){

    $("#tableId button").click(function(){

        var trElem = $(this).closest("tr");// grabs the button's parent tr element
        var firstTd = $(trElem).children("td")[0]; //takes the first td which would have your Id
        alert($(firstTd).text())
    })

})

当单击一行时，它将找到父 tr，然后您可以在具有您的 Id 的那一行中获取 td。

【讨论】：

我知道这是一个旧答案，但这对我来说很完美。尝试的所有其他方法均无效。谢谢

【解决方案2】：

您可以使用以下代码：

var $el = $('#example');
var oTable = $el.dataTable({
    // options
});

$el.on('click', '.openDelete', function() {
    var row = $(this).closest('tr')[0];
    var rowData = oTable.row(row).data();
    if (rowData) {
        var rowId = rowData.ID;

        // Use your rowId value the way you like
    }
});

此解决方案不会从 DOM 中读取 ID（如 mattfetz 的回答），而是使用 dataTable .data() 方法检索原始数据项。这可能更可靠，对实现的依赖更少。

【讨论】：

【解决方案3】：

我是这样解决的：

var oTable =  $('#example'). dataTable();
$('#example').on('click', 'tr', function(){
    var oData = oTable.fnGetData(this);
    console.log(oData.ID);
});

【讨论】：