读取 JQuery 中隐藏列的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33083030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Read Value of Hidden Column in JQuery
提问by unbalanced
I need to hide a column on the table, but after that I cannot read selected row's hidden column value.
我需要隐藏表格上的一列，但之后我无法读取所选行的隐藏列值。
dtTable = $('#lookupTable').DataTable({
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
],
aaData: data,
aoColumns: cols,
paging: false,
scrollCollapse: true,
destroy: true
});
as you see the first column is hidden now. And I am trying to read the column value with that code
如您所见，第一列现在已隐藏。我正在尝试使用该代码读取列值
selectedIndex = $(this).find('td:eq(0)').text();
if i delete <"visible": false> from the code i can read the first column's value, but if it is hidden it gives me second column value.
如果我从代码中删除 <"visible": false> 我可以读取第一列的值，但如果它被隐藏，它会给我第二列值。
I tired to change "witdh" property but it didnt work..
我厌倦了改变“witdh”属性，但它没有用..
回答by Daniel B
The CSS selector wont work, because "visible": falsein your columnDefsdoes not mean that the column gets the equivalent display: none;style property in the markup.
CSS 选择器不起作用，因为"visible": false在您columnDefs中并不意味着该列display: none;在标记中获得等效的样式属性。
Instead, you'll have to use the DataTables API to get the data in the hidden column.
相反，您必须使用 DataTables API 来获取隐藏列中的数据。
The function fnGetDatawill do the trick. It returns the text data in the cell that is passed as an argument to the function.
该功能fnGetData将解决问题。它返回作为参数传递给函数的单元格中的文本数据。
Heres the example from the documentation
这是文档中的示例
oTable.$('td').click( function () {
var sData = oTable.fnGetData( this );
alert( 'The cell clicked on had the value of '+sData );
});
In your case, the column is hidden, thus you'll have to combine it with a second API call. Say that you click the row with the hidden first column, you can combine the fnGetDatawith the fnGetPositionfunction.
在您的情况下，该列是隐藏的，因此您必须将它与第二个 API 调用结合起来。假设您单击隐藏第一列的行，您可以将fnGetData与fnGetPosition功能结合起来。
var position = dtTable.fnGetPosition(this);
var hiddenColumnValue = dtTable.fnGetData(position)[0];
Check the documentation, it has some great examples.
检查文档，它有一些很好的例子。
This is the working code
这是工作代码
$('#lookupTable tbody').on('click', 'tr', function () {
selectedIndex = dtTable.row(this).data()[0];
});
回答by davidkonrad
Go through the dataTables API and you have multiple ways to retrieve data from hidden columns the correct way. For example you can use cells. As you see in the link you can use all kind of selectors with cells, like a jQuery selector.
通过 dataTables API，您可以通过多种方式以正确的方式从隐藏列中检索数据。例如，您可以使用cells. 正如您在链接中看到的，您可以使用所有类型的选择器cells，例如 jQuery 选择器。
Here a very simple example that logs out the values of the first column that has been hidden :
这是一个非常简单的示例，它记录了已隐藏的第一列的值：
var dtTable = $('#example').DataTable()
dtTable.columns([0,1,2]).visible(false);
for (var i=0;i<10;i++) {
console.log(dtTable.cells({ row: i, column: 0 }).data()[0]);
}
It cannot be emphasized enough : Always go through the API, do not try to use traditional jQuery on an initialised dataTable!!
怎么强调都不为过：始终通过 API，不要尝试在初始化的 dataTable 上使用传统的 jQuery！！
In this case the reason is obvious : jQuery can only access elements that actually is in the DOM. When you hide columns in dataTables they are not hidden as in display: none, they are simply not rendered!
在这种情况下，原因很明显：jQuery 只能访问实际在 DOM 中的元素。当您隐藏 dataTables 中的列时，它们不会像 中那样隐藏display: none，它们根本不会呈现！
回答by Mohd Naved
The correct answer is pretty old. So, if the correct answer does not work out for you. Please try this method :
正确答案已经很老了。因此，如果正确答案不适合您。请试试这个方法：
selectedIndex = dtTable.row(this).data();
This code will return the raw json object which was fetched for this row. something like :
此代码将返回为该行获取的原始 json 对象。就像是 ：
{
"modify":"false",
"lastModify":"Tuesday",
"name":"abc",
"DT_RowId":"row_1",
"fileID":"0bde976"
}
To get the "fileID" you just need to :
要获得“fileID”，您只需要：
alert("ID = "+selectedIndex.fileID);
回答by JP Acharya
var table= $('#tablename').DataTable();
var hiddenColumnData1 = table.row('#trIdName').data()[1];
var hiddenColumnData2 = table.row('#trIdName').data()[2];
console.log("First Hidden Column Data of 'trIdName' : "+hiddenColumnData1)
console.log("Second Hidden Column Data of 'trIdName' : "+hiddenColumnData1)
回答by Atiq Baqi
Traditional jquery wont work on datatable , you have to use API defined methods to get the value. In my case this worked fine to get hidden column value on button click in each row -
传统的 jquery 不适用于 datatable ，您必须使用 API 定义的方法来获取值。在我的情况下，这可以很好地在每行中单击按钮时获取隐藏的列值 -
$(function () {
var t = $('#mytableid').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"visible":false,
"targets": [0]
}]
});
$('#mytableid').on('click', '.btnClass', function () {
var currentRow = $(this).closest("tr");
var columnvalue = t.row(currentRow).data()[0];
console.log(columnvalue);
});
});
回答by Rock
var dtTable = $('#test').DataTable() $('#test tbody').on('click', 'tr td .fa-pencil', function (e) {
ID = (dtTable.row($(this).closest('tr')).data().Id);
});`
`
回答by Vivek
Another Soultion Is Add Css Class ID Fiekd Visbilety hideen And $(this).find('td:eq(0)').text(); Retrive The value..
另一个解决方案是添加 Css Class ID Fiekd Visbilety hideen And $(this).find('td:eq(0)').text(); 检索价值..
