twitter-bootstrap 单击按钮获取数据表的行数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43435900/
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
Get datatable's row data on button click
提问by RoyBarOn
i have a problem with thisproject.
我有这个项目的问题。
I'm trying to create a crud menu, when hitting the Edit button the row's data will be transferred to a bootstrap modal and from there user will be able to edit.
我正在尝试创建一个 crud 菜单，当点击“编辑”按钮时，该行的数据将被传输到引导模式，并且用户将能够从那里进行编辑。
Problem : right now when hitting the row - the modal opens perfectly with the row's data - but when i try to change it to get the data by pressing on the button ('.edit_btn') ,it dos't works. i know that the button doesn't holds any data - so that's why it's probably don't work....
问题：现在当点击行时 - 模式与行的数据完美打开 - 但是当我尝试通过按下按钮（'.edit_btn'）来更改它以获取数据时，它不起作用。我知道按钮不保存任何数据 - 所以这就是它可能不起作用的原因......
$('#example tbody').on('click', '.edit_btn', function () { // works only
when replacing 'tr' with '.edit_btn' //
var data_row = table.row(this).data(); // row's data
$("#myModal").modal('show');
$('#myModal').on('shown.bs.modal', function() {
$('#name').val(data_row.id);
$('#type').val(data_row.type);
$('#camp').html(data_row.campaign);
});
});
Thanks
谢谢
回答by davidkonrad
I would use a delegated event handler tbody .edit_btnand grab the row through closest('tr'):
我将使用委托的事件处理程序tbody .edit_btn并通过closest('tr')以下方式获取行：
$('#example').on('click', 'tbody .edit_btn', function () {
var data_row = table.row($(this).closest('tr')).data();
...
})
forked plunkr -> https://plnkr.co/edit/58vkkp3M6d68uuMknXus?p=preview
分叉的 plunkr -> https://plnkr.co/edit/58vkkp3M6d68uuMknXus?p=preview
回答by RoyBarOn
Got it...
知道了...
$('#example tbody').on('click', '.edit_btn', function () {
var data_row = table.row( $(this).parents('tr') ).data(); // here is the change
$("#myModal").modal('show');
$('#myModal').on('shown.bs.modal', function() {
$('#name').val(data_row.id);
$('#type').val(data_row.type);
$('#camp').html(data_row.campaign);
});
});
