[英]How to get Id value by clicking Edit button on the same row of DataTable
I use jQuery Datatable
for listing records and add an Action
button (Edit) for editing the record on a modal dialog. 我使用jQuery Datatable
列出记录并添加一个Action
按钮(Edit)来编辑模态对话框中的记录。 If I select a row I can get the row id value and open the related record on modal dialog. 如果我选择一行,我可以获取行id值并在模态对话框中打开相关记录。 However, if I click the Edit
button directly, I cannot get the Id value of the related record (on the same row) because it is not selected first when clicking Edit
button. 但是,如果我直接单击“ Edit
按钮,则无法获取相关记录的Id值(在同一行上),因为单击“ Edit
按钮时未首先选中该值。 What I want to do is that: I want to get the Id value of the row on which I click the Edit button. 我想要做的是:我想获得我单击编辑按钮的行的Id值。 Is it possible? 可能吗? If not, can I select the hovered row programmatically when I click the Edit
button? 如果没有,我可以在单击“ Edit
按钮时以编程方式选择悬停行吗? (If the prior scenario is possible I would prefer it). (如果先前的情况是可能的,我会更喜欢它)。 Any idea? 任何想法?
function openModal() {
var table = $('#dtbListAccount').DataTable();
var oRow = $('this').parents('tr')[0];
var oData = table.fnGetData(oRow);
//code omitted for brevity
};
You can use this code to achieve this. 您可以使用此代码来实现此目的。
var table;
$(document).ready( function () {
table = $('#example').DataTable();
} );
$('body').on('click', '#btnEdit', function(){
//to get currently clicked row object
var row = $(this).parents('tr')[0];
//for row data
console.log( table.row( row ).data() );
});
It will return row data as a string array. 它将行数据作为字符串数组返回。
Use the browser console to see the results. 使用浏览器控制台查看结果。
Here's the full source code. 这是完整的源代码。 Hope this helps :) 希望这可以帮助 :)
//when button (edit button here) is clicked.... Note: no need id for buttons too, just use <button> tag $('table button').click(function() { var tr = $(this).closest('tr'); var id = tr.children('td:eq(0)').text(); //get the text from first col of current row console.log(id); //you'll get the actual ids here });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table> <tr> <th>Id</th> <th>Name</th> <th>Surname</th> <th>Action</th> </tr> <tr> <td>1</td> <td>Hans</td> <td>Jahnsen</td> <td> <button>Edit</button> </td> </tr> <tr> <td>2</td> <td>Robert</td> <td>Boylstat</td> <td> <button>Edit</button> </td> </tr> <tr> <td>3</td> <td>Jim</td> <td>Alexi</td> <td> <button>Edit</button> </td> </tr> </table>
Assign the row-id(s) to the edit buttons as well, write click events for the edit buttons which, based on the id of the button clicked on, triggers the edit functionality / view. 将行id分配给编辑按钮,为编辑按钮编写单击事件,根据单击的按钮的ID,触发编辑功能/视图。
You could assign the row-id(s) to the buttons either when rendering itself, or write a small function that does the same on page load. 您可以在呈现自身时将行id分配给按钮,或者在页面加载时编写一个小功能。
If the id is on the parent container then find it's value and use it. 如果id在父容器上,则找到它的值并使用它。 If it's a sibling then do the same. 如果它是兄弟姐妹,那么就这样做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.