如何使用数据表在渲染函数中使用列名
Posted
技术标签:
【中文标题】如何使用数据表在渲染函数中使用列名【英文标题】：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 如果被选中。等等。
好的 - 明白了 - 谢谢你的澄清。
【参考方案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 ''; `以上是关于如何使用数据表在渲染函数中使用列名的主要内容，如果未能解决你的问题，请参考以下文章