在数据表中单击按钮后如何获取行数据

Question

can anyone help me on how to get a single row data on a click event.任何人都可以帮助我了解如何获取单击事件的单行数据。

This is the table which is dynamically populated after Success function in AJAX call is executed这是在执行 AJAX 调用中的成功 function 后动态填充的表

<div class="table-responsive table-wrap tableFixHead container-fluid">
<table class="table bg-violet dT-contain" id="datatable" >
    <thead class="thead-dark">
        <tr>
            <th>No.</th>
            <th>Main</th>
            <th>Shrinked</th>
            <th>Clicks</th>
            <th>Disable</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-violet">

        </tr>
    </tbody>
</table>
</div>

<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/jquery.dataTables.min.js"></script>
<script src="scripts/dataTables.bootstrap4.min.js" defer></script>
<script src="scripts/dashboard.js" defer></script>

This is my ajax success function这是我的 ajax 成功 function

success: function(data){
        $('#datatable').dataTable({
        data: data,
        "autoWidth": true,
        columns: [
            {'data': 'id'},
            {'data': 'main'},
            {'data': 'shrinked'},
            {'data': 'clicks'},
            {"defaultContent": "<button id='del-btn'>Delete</button>"}
            ]
        })
    }

I am adding a delete button to each row dynamically, but can't seem to fetch row data using it.我正在为每一行动态添加一个删除按钮，但似乎无法使用它获取行数据。 I tried this method with some tweaks to my success function我尝试了这种方法，对我的成功进行了一些调整 function

$('#datatable tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    alert( data[0] );
} );

But this didn't seem to work.但这似乎不起作用。

The JSON data returning from the AJAX call is in this format:从 AJAX 调用返回的 JSON 数据采用以下格式：

[{"id":"12","main":"ndkekfnq" ...}, {.....}]

I also added an onclick function on the delete button to try to fetch data but that also didn't work.我还在删除按钮上添加了一个 onclick function 以尝试获取数据，但这也没有用。

EDIT: whole AJAX request编辑：整个 AJAX 请求

$(document).ready(()=>{
$.ajax({
    url: 'URL',
    method: 'post',
    dataType: 'json',
    data: {
        "email": window.email,
        "token": window.token
    },
    success: function(data){
        let table = $('#datatable').dataTable({
        data: data,
        "autoWidth": true,
        columns: [
                {'data': 'id'},
                {'data': 'main'},
                {'data': 'shrinked'},
                {'data': 'clicks'},
                {"defaultContent": "<button id='dis-btn' class='btn btn-warning'>Disable</button>"},
                {"defaultContent": "<button id='del-btn' class='btn btn-danger'>Delete</button>"}
            ]
        })
        $('#datatable tbody').on('click', "#del-btn", function() {
            let row = $(this).parents('tr')[0];
            //for row data
            console.log(table.row(row).data().id);
        });
    }
})

}) })

What would be the correct way to do this?这样做的正确方法是什么？ Thank you谢谢

Answer 1

You need to use column.render instead o defaultContent and then get the data on an outside function, you need to render a button at the render of the table:您需要使用 column.render 代替 defaultContent，然后在外部 function 上获取数据，您需要在表格的渲染处渲染一个按钮：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <div class="table-responsive table-wrap tableFixHead container-fluid">
        <table class="table bg-violet dT-contain" id="datatable" >
            <thead class="thead-dark">
                <tr>
                    <th>No.</th>
                    <th>Main</th>
                    <th>Shrinked</th>
                    <th>Clicks</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr class="bg-violet">
        
                </tr>
            </tbody>
        </table>
    <script>
      $('#datatable').dataTable( {
            "data": [{'id':20,'main':'hola','shrinked':false,'clicks':2000},{'id':21,'main':'hola','shrinked':false,'clicks':283000}],
            "autoWidth": true,
            "columns": [ 
                {"data": "id"},        
                {'data': 'main'},
                {'data': 'shrinked'},
                {'data': 'clicks'},
                {"data": "id",
                    "render": function ( data, type, row, meta ) { 
                        return '<button data-id="'+data+'" onclick="deleteThis(event)">Delete</button>'
                        }
                }
                
             ]
        } )

function deleteThis(e){
  console.log(e.target.getAttribute('data-id'))
}
    </script>
  </body>
</html>

Haven't tried, but based on Datatables docs, this should work, let me know if it worked.没有尝试过，但基于 Datatables 文档，这应该可以工作，让我知道它是否有效。

Answer 2

Here is working code for you.这是适合您的工作代码。 You need to set the datatables in a var .您需要在datatables中设置数据var 。

Use that var table to look for clicked row which will $(this).parents('tr')[0] and use .data.id to the clicked item id使用该var table查找将$(this).parents('tr')[0]的clicked row并将.data.id用于单击的项目id

I have recreated the your example and its working fine.我已经重新创建了您的示例，并且工作正常。 Just set you ajax response to the data .只需设置您对data的ajax响应。

Demo演示

 //Ajax Data var data = [{ "id": "10", "main": "ndkekfnq", "shrinked": "ndkekfnq", "clicks": "ndkekfnq" }, { "id": "12", "main": "Something", "shrinked": "Data", "clicks": "Ha" }] //Data Table var table = $('#datatable').DataTable({ data: data, columns: [{ 'data': 'id' }, { 'data': 'main' }, { 'data': 'shrinked' }, { 'data': 'clicks' }, { "defaultContent": "<button id='del-btn'>Delete</button>" } ] }); $('#datatable tbody').on('click', "#del-btn", function() { var row = $(this).parents('tr')[0]; //for row data console.log(table.row(row).data().id); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA==" crossorigin="anonymous" /> <div class="table-responsive table-wrap tableFixHead container-fluid"> <table class="table bg-violet dT-contain" id="datatable"> <thead class="thead-dark"> <tr> <th>No.</th> <th>Main</th> <th>Shrinked</th> <th>Clicks</th> <th>Delete</th> </tr> </thead> <tbody> <tr class="bg-violet"> </tr> </tbody> </table>

Answer 3

@Javier 's answer is a very good way to solve the OP's issue. @Javier 的回答是解决 OP 问题的好方法。 Another way, if you don't want to include id field twice, would be like this:另一种方式，如果您不想两次包含id字段，则如下所示：

"columns": [ 
            {"data": "id"},        
            {'data': 'main'},
            {'data': 'shrinked'},
            {'data': 'clicks'},
            {"data": null,
                "render": function ( data, type, row, meta ) { 
                    return '<button data-id="' + data.id + '" onclick="deleteThis(event)">Delete</button>'
                    }
            }
         ]

在数据表中单击按钮后如何获取行数据

问题描述

3 个解决方案

解决方案1
3 已采纳 2020-08-04 03:57:47

解决方案2
2 2020-08-04 03:47:08

解决方案3
1 2020-08-04 08:34:08

在数据表中单击按钮后如何获取行数据

问题描述

3 个解决方案

解决方案1 3 已采纳 2020-08-04 03:57:47

解决方案2 2 2020-08-04 03:47:08

解决方案3 1 2020-08-04 08:34:08

解决方案1
3 已采纳 2020-08-04 03:57:47

解决方案2
2 2020-08-04 03:47:08

解决方案3
1 2020-08-04 08:34:08