如何使用数据表在渲染函数中使用列名答案

【问题标题】：How to use column name in render function using datatables如何使用数据表在渲染函数中使用列名
【发布时间】：2021-10-06 08:37:09
【问题描述】：

我有一个我认为很容易回答的问题，但我在论坛上找不到如何解决..

以下代码用于在选中或取消选中复选框时将信息发送到 ajax 脚本。它现在只将数据从 kwartaal_id 发送到脚本。但是我还需要将列名发送到 ajax 脚本，因为我在一页上使用了更多这些复选框，并且我需要知道触发了哪个复选框。因此，我需要将列名与 row.kwartaal_id 一样发布。我怎么做？我想应该是这样的。。

"columns": [
                 
                {data: 'kwartaal_klant',
                render: function ( data, type, row, meta ) {
                return ''+data+'';
                } } , 
                    {data: 'kwartaal_notes',
                render: function ( data, type, row, meta ) {
                return ''+data+'';
                } } ,    
                {data: 'kwartaal_1'},
                {data: 'kwartaal_2'},
                {data: 'kwartaal_3'},
                {data: 'kwartaal_4'},
                {data: 'kwartaal_user',
                render: function ( data, type, row, meta ) {
                return ''+data+'';
                } } , 
                 ],

之前：

{targets: [2,3,4,5],
      render: function ( data, type, row ) {
        if ( type !== 'display' )
         
          return ""; //Empty cell content
        else {             //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
          return '<label class="switch"><input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' value="' + row.kwartaal_id + '" class="active" /><div class="slider round"><span class="on">ON</span><span class="off">OFF</span></div></label>';
        }
 
        return data;
   },

之后：（添加了 ''name'' 属性）

{targets: [2,3,4,5],
     render: function ( data, type, row ) {
       if ( type !== 'display' )
        
         return ""; //Empty cell content
       else {             //if column data is 1 then set attr to checked, use row id as input id (plus prefix)
         return '<label class="switch"><input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' value="' + row.kwartaal_id + '"
         class="active" name="' + columnName + '" /><div class="slider round"><span class="on">ON</span><span class="off">OFF</span></div></label>';
       }
 
       return data;
  },

【问题讨论】：

这里的“列名”和columnName 变量是什么意思？您是指在 DataTable 中向用户显示的列标题吗？你的意思是 DataTables columns.name 选项（如果是这样，你实际上是在任何地方设置它吗）？还是你的意思是别的？你可以edit你的问题澄清一下。
我的意思是这里显示的列名：{data: 'kwartaal_1'}，我需要发布数据的名称。所以 kwartaal_1 当该列中的一个单元格被选中时， kwartaal_2 如果被选中。等等。
好的 - 明白了 - 谢谢你的澄清。

标签： javascript jquery datatables

【解决方案1】：

您可以使用列渲染器中的meta 对象来访问列的data 值：

meta.settings.aoColumns[meta.col].mData

这将访问 DataTables settings 对象，该对象包含列 data 值的数组。您可以使用当前列的索引meta.col 获取该数组中的相关条目。

这是一个例子：

var dataSet = [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Zürich",
      "extn": "5421"
    },
    {
      "id": "57",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ];
 
$(document).ready(function() {

var table = $('#example').DataTable( {
  lengthMenu: [ [2, -1] , [2, "All"] ],
  data: dataSet,
  columns: [
    { title: "ID", data: "id" },
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { 
      title: "Start date", 
      data: "start_date",
      render: function ( data, type, row, meta ) {
        if (type === 'display') {
          //console.log( meta.settings.aoColumns[meta.col].mData );
          return meta.settings.aoColumns[meta.col].mData;
        } else {
          return data;
        }
      }
    },
    { title: "Extn.", data: "extn" },
    { title: "Salary", data: "salary" }
  ]

} );


} );

<!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%">
    </table>

</div>


</body>
</html>

演示只是在开始日期列中打印data 值。您显然可以在 name="' + columnName + '" 代码中使用该值。

【讨论】：

非常感谢。我不知道这是否是你的意图。但我只是像这样使用你的建议` {targets: [2,3,4,5], render: function ( data, type, row, meta ) { if ( type !== 'display' ) return ""; else { return '
ON关闭
'; `