单击按钮获取数据表的行数据

Question

我对@9​​87654321@ 项目有疑问。

我正在尝试创建一个 crud 菜单，当点击编辑按钮时，该行的数据将被传输到引导模式，并且用户可以从那里进行编辑。

问题：现在当点击行时 - 模式与行的数据完美打开 - 但是当我尝试更改它以通过按下按钮 ('.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);

    });

});

谢谢

Answer 1

我将使用委托事件处理程序 tbody .edit_btn 并通过 closest('tr') 抓取行：

$('#example').on('click', 'tbody .edit_btn', function () {
    var data_row = table.row($(this).closest('tr')).data();
    ...
})

分叉的 plunkr -> https://plnkr.co/edit/58vkkp3M6d68uuMknXus?p=preview

Answer 2

知道了……

$('#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);

    });

});