如何将第二个（隐藏）值添加到 datatables.net 中的单元格？答案

【问题标题】：how add second (hidden) value to cell in datatables.net?如何将第二个（隐藏）值添加到 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您的问题向我们展示您尝试过的内容、您使用的代码和数据以及运行时实际发生的情况。
感谢安德鲁詹姆斯。我编辑它。

标签： javascript jquery ajax datatables

【解决方案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>

从“标题”列中选择两个或多个单元格，然后单击按钮（位于页面底部）。

【讨论】：