获取DataTable中隐藏列的值
Posted
技术标签:
【中文标题】获取DataTable中隐藏列的值【英文标题】：Get value of hidden column in DataTable 【发布时间】：2021-10-16 00:38:02 【问题描述】：在我的页面上选择按钮后，我需要遍历 DataTable，找到带有选中单选按钮的行，然后从该行的隐藏列中获取值。我已经尝试了几乎所有东西，但我的隐藏列无法访问，只有我的 3 个可见列。我的代码示例有几个我尝试过的选项，如果有点混乱，我深表歉意。这是我第一次发帖，如果我在这里搞砸了，请不要生气。我见过 .fnGetData 选项，但它被列为“旧版”，所以我宁愿不使用它 (???)。
表设置：
var thisurl = '@Url.Action("Addresses", new AddUID = "000" )';
thisurl = thisurl.replace("000", @ViewBag.AddUID);
$('#@ViewBag.TblID').dataTable(
"columnDefs": [
"targets": [0, 1],
"visible" : false
],
"searching": false,
"info": false,
"paging": false,
"order": [1, "desc"],
"ajax":
"type": "POST",
"url": thisurl,
"contentType": 'application/json; charset=utf-8',
"data": function (data) return data = JSON.stringify(data);
,
"columns": [
"data": "Adrs_UID" ,
"data": "revision_id" ,
"render": function (data, type, row)
var url = '@html.RadioButton("000", "select", false, htmlAttributes: new @id = "111", onclick = "ResetRadioBtns()" )';
url = url.replace("000", '@ViewBag.ChkID').replace("111", '@ViewBag.ChkID');
return url;
,
"render": function (data, type, row)
return row.Adrs_One + ' ' + row.Adrs_City + ' ' + row.Adrs_St + ' ' + row.Adrs_Zip;
,
"render": function (data, type, row)
var text = 'Print';
var target = '_blank';
var link = '../DocGen/DocGen_AB.aspx?AUID=' + row.Adrs_UID + '&REV=' + row.revision_id;
return '<a href="' + link + '" target="' + target + '">' + text + '</a>';
]
);
脚本
$('.btnAPL_DTV').click(function (e)
var table = $('#tblAPLAddress_DTV').DataTable();
table.rows().every(function (value, index)
node = table.row(value).node();
var check = $(node).find("input[id$='chbxAPLAdSelect_DTV']");
var data1 = $('#tblAPLAddress_DTV').DataTable().row(this).data();
data = data1[0];
if (check.prop("checked") == true)
// Get Rev_Id & Adrs_UID from Hiddent Field
var allData = table.row(index).data();
var revData = allData[0].data();
adrsUID = node.data()[0];
revId = node.data()[1];
);
);
2021 年 8 月 13 日更新
Andrew - 这里是脚本代码和我昨天使用您的示例的结果（包括使用索引值，以便您可以看到我昨天做了什么）：
$("#tblAPLAddress_DTV").on("click", ":radio", function ()
var table = $('#tblAPLAddress_DTV').DataTable();
var rowNode = $(this).parent().parent()[0];
console.log("Result using .Adrs_UID: " + table.row(rowNode).data().Adrs_UID);
console.log("Result using Index Value: " + table.row(rowNode).data()[0]);
);
这是我在控制台中显示的结果：
Result using .Adrs_UID: undefined
Result using Index Value: <input id="chbxAPLAdSelect_DTV" name="chbxAPLAdSelect_DTV" onclick="ResetRadioBtns()" type="radio" value="select">
我不确定您指的是哪个 HTML。这是我的 HTML 表格设置。 @ViewBag.TblID = "tblAPLAddress_DTV"：
<div class="row">
<div class="col-md-offset-1">
<table id=@ViewBag.TblID class="table text-nowrap" style="padding-top:1em">
<thead>
<tr>
<th>Address UID</th>
<th>RevisionID</th>
<th></th>
<th>Address</th>
<th>Address Block</th>
</tr>
</thead>
</table>
</div>
</div>
我认为这并不重要，但如果确实如此，我深表歉意。我上面的表格 HTML 设置和表格定义脚本位于部分视图中。 这是索引视图中调用 PartialView 的 Html 调用：
@ Html.RenderAction("_Addresses", "DocGeneration", new id = "tblAPLAddress_DTV", chkId = "chbxAPLAdSelect_DTV", AddUID = ViewBag.AddUID );
希望这能为您提供所需的信息。
更新 2 更新脚本：
$("#tblAPLAddress_DTV").on("click", ":radio", function ()
var table = $('#tblAPLAddress_DTV').DataTable();
var rowNode = $(this).parent().parent()[0];
console.log(rowNode);
);
控制台结果 - 我没有深入研究。
<tr role="row" class="odd">
<td class="sorting_1">
<input id="chbxAPLAdSelect_DTV" name="chbxAPLAdSelect_DTV" onclick="ResetRadioBtns()" type="radio" value="select">
</td>
<td>17647 157TH STREET BONNER SPRINGS XX 66000</td>
<td><a href="../DocGen/DocGen_AB.aspx?AUID=9546&REV=3" target="_blank">Print</a></td>
</tr>
这些控制台结果与生成的 HTML 相同。 谢谢！
【问题讨论】：
【参考方案1】：我采用了您的表格和代码的简化版本来展示一种可能的方法：
$(document).ready(function()
var table = $('#example').DataTable(
"columnDefs": [
"targets": [0, 1],
"visible" : false
]
);
$( "#example" ).on( "click", ":radio", function()
var rowNode = $( this ).parent().parent()[0];
console.log( table.row(rowNode).data()[0] );
);
);<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior javascript Developer</td>
<td>London</td>
<td>22</td>
<td>2012/03/29</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Milan</td>
<td>33</td>
<td>2008/11/28</td>
<td><input type="radio"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>（在我的例子中，单选按钮在每次点击后都不会被清除，因为我没有添加那个逻辑。）
这是如何工作的：
我使用委托的事件处理程序：
$( "#example" ).on( "click", ":radio", function() ...
这允许将事件附加到最初可能未绘制的单选按钮 - 例如，如果它们不在 DataTable 的分页数据的第 1 页上。
我使用 jQuery 提取行节点（<tr> 元素）：
var rowNode = $( this ).parent().parent()[0];
在我的例子中，行节点是单选按钮的祖父母 (.parent().parent())。您的情况可能略有不同。我不知道你最终渲染的 HTML 结构是什么。
在我的例子中，每一行数据都存储为一个值数组（而不是一个对象），所以我可以使用以下方法来访问第一个隐藏值：
table.row(rowNode).data()[0]
请注意，table 变量已定义为 DataTable 声明的一部分。
如果您的行数据以对象 ... 而不是数组[ ... ] 的形式提供，您将需要相应地调整您的代码。
您可以将table.row(rowNode).data() 登录到控制台以亲自查看。您尚未向我们展示您的 JSON 数据，但您似乎需要访问命名值，例如 adrsUID - 所以可能是这样：
table.row(rowNode).data().adrsUID
【讨论】：
感谢您回复安德鲁。我尝试了您的代码，但结果是：<input id="chbxAPLAdSelect_DTV" name="chbxAPLAdSelect_DTV" onclick="ResetRadioBtns()" type="radio" value="select"> 我的一行数据如下所示："Adrs_UID": 9546, "Adrs_One": "17647 157TH STREET", "Adrs_City": "B SPRINGS","Adrs_St": "XX","Adrs_Zip": "00000","Updated_Date": "/Date(1378740584860)/","revision_id": 3。关于我正在做的不同的事情有什么想法吗？
您应该编辑您的问题并在此处添加此信息。在 cmets 中添加代码并不是很有效。但是...（1）如果您的行数据使用Adrs_UID，那么您需要在我的代码版本中使用它：table.row(rowNode).data().Adrs_UID。 (2) 你需要准确地展示你的尝试是什么样子。否则，这只是我的猜测。我真的不知道您所说的“我的结果是……”是什么意思，因为我不知道您使用什么代码来生成该结果。 (3) 您还需要显示您正在使用的 HTML。
嗨安德鲁（詹姆斯？）。我更新了我的问题。谢谢。
感谢您的更新。首先，console.log( rowNode ); 显示什么？它应该为包含单击的单选按钮的行打印<tr> 节点。如果没有，那么我需要在此处查看您的代码生成的 HTML（最终结果 HTML，而不是源 HTML）。这样我就可以看到您的单选按钮是如何创建的，以及典型行的结构。看到最终结果的示例<tr>...</tr> HTML 就足够了。
您的 rowNode 结构看起来与我预期的一样 - 所以，很抱歉，但我看不出您的代码行为与我的示例不同的任何明显原因。以上是关于获取DataTable中隐藏列的值的主要内容，如果未能解决你的问题，请参考以下文章