如何通过单击 DataTable 同一行上的 Edit 按钮来获取 Id 值

Posted 2023-05-07

【中文标题】如何通过单击 DataTable 同一行上的 Edit 按钮来获取 Id 值

【英文标题】：How to get Id value by clicking Edit button on the same row of DataTable

【发布时间】：2017-01-16 18:08:58

【问题描述】：

我使用jQuery Datatable 列出记录并添加一个Action 按钮（编辑）以在模式对话框中编辑记录。如果我选择一行，我可以获得行 id 值并在模式对话框中打开相关记录。但是，如果我直接点击Edit按钮，我无法获取相关记录的Id值（在同一行），因为点击Edit按钮时没有先选中它。我想要做的是：我想获取单击编辑按钮所在行的 Id 值。可能吗？如果不是，我可以在单击Edit 按钮时以编程方式选择悬停的行吗？ （如果前面的场景是可能的，我会更喜欢它）。有什么想法吗？

function openModal() 

    var table = $('#dtbListAccount').DataTable();
    var oRow = $('this').parents('tr')[0];
    var oData = table.fnGetData(oRow);

    //code omitted for brevity
;

【问题讨论】：

var oRow= $('this').parents('tr')[0]; and var oData = oTable.fnGetData(oRow);

this 指的是您的编辑按钮。oData 包含点击行的数据

oData 包含 id 以及 0 index

非常感谢，但遇到“TypeError: dataTable.fnGetData is not a function”错误。你能看看我上面的javascript方法参数吗？

实际上您使用的是更高版本的数据表。等等，我给你举个例子……

【参考方案1】：

您可以使用此代码来实现此目的。

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() );

);

它将行数据作为字符串数组返回。

Live Demo Here

使用浏览器控制台查看结果。

【讨论】：

你太棒了！.. 非常感谢你的努力和完美的解决方案，充满了演示:)

@mmushtaq ，为什么每个按钮的 id 都一样？

@Dragon 这样我就可以在每个表格行按钮单击时获取行数据。您可以将类分配给按钮。

【参考方案2】：

这是完整的源代码。希望这会有所帮助:)

//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>

【讨论】：

这似乎也是一个优雅的解决方案，但总是返回“1”作为 id 值。另一方面，源于您的回答，我在jQuery: Get the contents of a table row with a button click 页面上找到了类似的方法。非常感谢。投票+

是否有可能使该行在点击时可编辑......而不是按钮点击，即编辑......？

【参考方案3】：

也将 row-id(s) 分配给编辑按钮，为编辑按钮编写点击事件，根据点击按钮的 id 触发编辑功能/视图。

您可以在呈现自身时将行 ID 分配给按钮，或者编写一个在页面加载时执行相同操作的小函数。

【讨论】：

能否将示例代码添加到您的答案中？

【参考方案4】：

如果 id 在父容器上，则找到它的值并使用它。如果它是兄弟姐妹，那么做同样的事情。

【讨论】：

能否将示例代码添加到您的答案中？

我不熟悉 jQuery 数据表。您能否将它的 DOM 结构发布到文档中时的样子，包括您的编辑按钮所在的位置。

非常感谢您的回答，但我在 mmushtaq 的回答的帮助下解决了这个问题。投票+