在JQuery中读取隐藏列的值
我需要在表上隐藏一列,但之后我无法读取所选行的隐藏列值。
dtTable = $('#lookupTable').DataTable({ "columnDefs": [ { "targets": [ 0 ], "visible": false, "searchable": false } ], aaData: data, aoColumns: cols, paging: false, scrollCollapse: true, destroy: true });
如您所见,第一列现在已隐藏。 我试图用该代码读取列值
selectedIndex = $(this).find('td:eq(0)').text();
如果我从代码中删除,我可以读取第一列的值,但如果它被隐藏,它会给我第二列值。
我厌倦了改变“witdh”财产,但它没有工作..
CSS选择器不起作用,因为你的columnDefs
中的"visible": false
并不意味着该列获得等效的display: none;
标记中的样式属性。
相反,您必须使用DataTables API来获取隐藏列中的数据。
函数fnGetData
可以解决这个问题。 它返回作为参数传递给函数的单元格中的文本数据。
下面是文档中的示例
oTable.$('td').click( function () { var sData = oTable.fnGetData( this ); alert( 'The cell clicked on had the value of '+sData ); });
在您的情况下,该列是隐藏的,因此您必须将其与第二个API调用组合。 假设您单击具有隐藏的第一列的行,您可以将fnGetData
与fnGetPosition
函数组合。
var position = dtTable.fnGetPosition(this); var hiddenColumnValue = dtTable.fnGetData(position)[0];
查看文档,它有一些很好的例子。
fnGetData()
fnGetPosition()
这是工作代码
$('#lookupTable tbody').on('click', 'tr', function () { selectedIndex = dtTable.row(this).data()[0]; });
浏览dataTables API,您可以通过多种方式以正确的方式从隐藏列中检索数据。 例如,您可以使用cells
。 正如您在链接中看到的,您可以使用所有类型的选择器与cells
,如jQuery选择器。
这是一个非常简单的示例,它记录了已隐藏的第一列的值:
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]); }
它不能被强调: 总是通过API,不要尝试在初始化的dataTable上使用传统的jQuery !
在这种情况下,原因很明显:jQuery只能访问DOM中实际存在的元素。 当您隐藏dataTables中的列时,它们不会像display: none
那样被隐藏,它们根本就不会被渲染!
正确答案很古老。 所以,如果正确的答案不适合你。 请尝试这种方法:
selectedIndex = dtTable.row(this).data();
此代码将返回为此行提取的原始json对象。 就像是 :
{ "modify":"false", "lastModify":"Tuesday", "name":"abc", "DT_RowId":"row_1", "fileID":"0bde976" }
要获得“fileID”,您只需:
alert("ID = "+selectedIndex.fileID);
var dtTable = $('#test').DataTable()
另一个Soultion是添加Css类ID Fiekd Visbilety hideen和$(this).find(’td:eq(0)’)。text(); Retrive价值..