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

Posted 2023-05-07

【中文标题】单击按钮获取数据表的行数据

【英文标题】：Get datatable's row data on button click

【发布时间】：2017-09-12 03:38:18

【问题描述】：

我对@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);

    );

);

谢谢

【参考方案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

【讨论】：

@RoyBarOn 委托只是为了确保它适用于所有页面（在分页表上）和closest() 以确保正确的<tr> 用于数据检索。

大卫康拉德 - 谢谢

【参考方案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);

    );

);

【讨论】：

如果将DataTable设置为响应式并在小型设备中打开，此方法将失败，因为不同父级中的列会减少。