[英]How To Hide A Table Column, But Still Use It With A Click Event? (JQuery Datatables)
I'm getting a RecordID and a Title from my datasource. 我从数据源中获取了一个RecordID和一个Title。 I only want to display the Title column on screen, but I need the RecordID from the row to be used in a click event. 我只想在屏幕上显示“标题”列,但是我需要将行中的RecordID用于click事件。 So I'm pulling them both into my table and I'm looking to hide the RecordID. 因此,我将它们都拉到表中,并且希望隐藏RecordID。
I have a table that is populated with an ajax source so the <tr>
and <td>
tags for my data are dynamically created. 我有一个用ajax源填充的表,因此可以动态创建数据的<tr>
和<td>
标记。 They aren't part of the code, so I can't simply add a class that I can hide with CSS. 它们不是代码的一部分,所以我不能简单地添加一个可以用CSS隐藏的类。
<table id="example">
<thead>
<tr>
<th>RecordID</th>
<th>TITLE</th>
</tr>
</thead>
<tbody>
<!---Data and tags are dynamically generated--->
</tbody>
</table>
The DataTables documentation lists a couple options of adding the function oTable.fnSetColumnVis( 0, false )
or the "bVisible":false
attribute. DataTables文档列出了添加函数oTable.fnSetColumnVis( 0, false )
或"bVisible":false
属性的几个选项。 Both of these work fine to hide my column, but then the click event I had based on that column will no longer work. 这两种方法都可以很好地隐藏我的列,但是基于该列的单击事件将不再起作用。
Here's the click event I'm using. 这是我正在使用的点击事件。
$('#example').on('dblclick', 'tr', function(event) {
var td = $('td', this);
var RecordID= $(td[0]).text();
});
So you can see it's accessing the index of 0 (the first td or column in that row.) Once I hide that column, another td becomes index of 0. I still need that RecordID column to get information from the row, but I don't want to show it on screen. 因此,您可以看到它正在访问索引0(该行的第一个td或列)。隐藏该列后,另一个td变为索引0。我仍然需要该RecordID列才能从行中获取信息,但是我不知道不想在屏幕上显示它。 Any ideas? 有任何想法吗?
I figured it out by adding a class when declaring the table. 我通过在声明表时添加一个类来弄清楚。
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true,
"bProcessing": false,
"bServerSide": false,
"bFilter":false,
"bPaginate":false,
"bInfo":false,
"bSort":false,
"bAutoWidth":false,
"sAjaxSource": "datasource.cfm",
"aoColumns": [
{ "mData": "RecordID", "sClass":"testclass" },
{ "mData": "TITLE" }
]
});
});
And then the css 然后的CSS
.testclass {
display:none;
}
The JQuery still works after this. 之后,JQuery仍然可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.