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

Question

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

以下代码用于在选中或取消选中复选框时将信息发送到 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;
  },

Answer 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": "0,800",
      "start_date": "2011/04/25",
      "office": "Zürich",
      "extn": "5421"
    },
    {
      "id": "57",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "2,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 + '" 代码中使用该值。

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

How to use column name in render function using datatables

javascript

jquery

datatables