javascript 如何在行单击时获取数据表的 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28225900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get ID of dataTable on row click
提问by dert detg
I have this code:
我有这个代码：
$('#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
}
]
});
my getN.php generate this code:
我的 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"}]}
so as you can see I hide first column in my datatable and that value is (ID) in my database... but now I need a way to get it. How?
如您所见，我隐藏了数据表中的第一列，该值在我的数据库中是 (ID) ......但现在我需要一种方法来获取它。如何？
I need to get data from 1. column of clicked row - to get ID, becouse I need then to update data in database and I need ID of clicked row. Any ideas?
我需要从点击行的 1. 列中获取数据 - 获取 ID，因为我需要更新数据库中的数据并且我需要点击行的 ID。有任何想法吗？
Also how I can access all values from clicked row ? etc.
另外我如何从单击的行访问所有值？等等。
just idea: clickedRow.data.Id, clickedRow.data.naziv etc. ... Is there any way?
只是想法：clickedRow.data.Id，clickedRow.data.naziv 等等......有什么办法吗？
回答by mattfetz
Here's a simple example you could go off from
这是一个简单的例子，你可以从
http://jsfiddle.net/zy65agrt/2/
http://jsfiddle.net/zy65agrt/2/
Html
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())
})
})
})
When a row is clicked it will find the parent tr and then you can grab the td in that row that has your Id.
单击一行时，它将找到父 tr，然后您可以在具有您的 Id 的行中获取 td。
回答by Stefano Dalpiaz
You can use the following code:
您可以使用以下代码：
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
}
});
This solution does not read the ID from the DOM (as in mattfetz's answer) but instead retrieves the original data item by using the dataTable .data()method. This is probably more reliable and less dependent on implementation.
此解决方案不会从 DOM 中读取 ID（如 mattfetz 的回答），而是使用 dataTable.data()方法检索原始数据项。这可能更可靠并且对实现的依赖更少。
回答by dert detg
I solve on this way:
我是这样解决的：
var oTable = $('#example'). dataTable();
$('#example').on('click', 'tr', function(){
var oData = oTable.fnGetData(this);
console.log(oData.ID);
});
