如何将第二个（隐藏）值添加到 datatables.net 中的单元格？
Posted
技术标签:
【中文标题】如何将第二个（隐藏）值添加到 datatables.net 中的单元格？【英文标题】：how add second (hidden) value to cell in datatables.net? 【发布时间】：2021-08-29 22:05:13 【问题描述】：场景：我想通过 POST 将选定单元格的值发送到控制器。 如何为每个选定的单元格发送两个值；一个值是可见的，另一个是隐藏的？
例如，每个单元格都包含时间和日期，只有时间显示在数据表中。 我想同时发布时间和日期。
有没有完整的使用mData和fnGetData的例子？
这是我的代码：
$('#example').DataTable(
"ajax": 'api/Tcal',
"iDisplayLength": '100',
"columns": [
"data": "id" ,
"data": "shanbeh" ,
"data": "yekShanbeh" ,
"data": "dooShanbeh" ,
"data": "sehShanbeh" ,
"data": "charShanbeh" ,
"data": "panjShanbeh" ,
"data": "jommeh" ,
],
language:
url: '/lib/datatables/js/Persian.json'
,
select:
style: 'multi',
items: 'cell'
);
);
$("#Button1").click(function ()
var oData = $("#example").DataTable().cells( selected: true ).data().toArray();
jQuery.ajax(
type: "POST",
url: "api/TGCells",
dataType: "json",
contentType: "application/json;",
data: JSON.stringify( data: oData ),
success: function (data)
alert(data);
console.log(data);
);
【问题讨论】：
欢迎来到 Stack Overflow。请仔细查看tour，尤其是关于不问“您尚未尝试找到答案的问题（展示您的工作！）”的部分。也看看How to Ask。 您可以edit您的问题向我们展示您尝试过的内容、您使用的代码和数据以及运行时实际发生的情况。 感谢安德鲁詹姆斯。我编辑它。 【参考方案1】：这是一种方法：
第 1 步
更改 DataTable，使其在每个单元格中存储两个值，使用两个 <span> 元素，其中一个跨度中的数据被隐藏：
<td>
<span class="part_one">my first value</span>
<span class="part_two" hidden>my second value</span>
</td>
您可以使用 DataTable 中的列渲染器来执行此操作：
"render": function ( data, type, row )
if ( type === "display" )
return '<span class="part_one">' + data +
'</span><span class="part_two" hidden>' + row.id +
'</span>';
else
return data; // for sorting and filtering, just use the main value
第 2 步
在您的按钮功能中，您可以访问 DataTable 节点而不是单元格，以访问包含 <span> 元素的内部 html：
$("#Button1").click(function ()
var table = $('#example').DataTable();
var nodes = table.cells( selected:true ).nodes().toArray();
nodes.forEach( (node) =>
var partOne = $(node).find('span.part_one').text();
var partTwo = $(node).find('span.part_two').text();
console.log( partOne, ':', partTwo );
);
);
一旦您将每个值都放在一个单独的变量中，您就可以根据需要构建您的 Ajax 请求。
完整示例：
这使用了一个测试 Ajax 响应，用于构建 DataTable：
<!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">
<!-- select extension -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
</table>
<br>
<button id="Button1">Click Me</button>
</div>
<script>
$(document).ready(function()
$('#example').DataTable(
ajax:
method: "GET",
url: "https://jsonplaceholder.typicode.com/posts",
dataSrc: "",
,
"columns": [
"title": "User ID", "data": "userId" ,
"title": "Title",
"data": "title",
"render": function ( data, type, row )
if ( type === "display" )
return '<span class="part_one">' + data +
'</span><span class="part_two" hidden>' + row.id +
'</span>';
else
return data;
],
select:
style: 'multi',
items: 'cell'
);
);
$("#Button1").click(function ()
var table = $('#example').DataTable();
var nodes = table.cells( selected:true ).nodes().toArray();
nodes.forEach( (node) =>
var partOne = $(node).find('span.part_one').text();
var partTwo = $(node).find('span.part_two').text();
console.log( partOne, ':', partTwo );
);
);
</script>
</body>
</html>从“标题”列中选择两个或多个单元格，然后单击按钮（位于页面底部）。
【讨论】：
以上是关于如何将第二个（隐藏）值添加到 datatables.net 中的单元格？的主要内容，如果未能解决你的问题，请参考以下文章