如何解决如何从数据表过滤器选项中删除<div>中的文本?
我有一个带有过滤器标题列的数据表。一列包含2种数据,用于显示和过滤的实际数据,以及隐藏<div>
中的另一种数据。仅当我将鼠标悬停在<div>
上时,隐藏的<td></td>
才应显示。悬停正在工作。但是,不过,我的过滤器选项也显示了来自隐藏的<div>
的数据。如何从过滤器选项中删除隐藏的<div>
数据?以下是我的代码:
CSS-悬停
.hoverbg {
position: relative;
}
.hoverbg div {
display: none;
}
.hoverbghover {
position: relative;
}
.hoverbghover div {
display: block;
position: absolute;
width: 15em;
top: 1.3em;
left: 70px;
z-index: 1000;
background-color: #DDD;
font-size: 1.3em;
padding: 5px;
border-radius: 4px;
}
PHP
<table id="pic_table" class="table" class="display">
<thead>
<tr>
<th class="filterhead"></th>
<th class="filterhead"></th>
<th class="filterhead"></th>
<th class="filterhead"></th>
<th class="filterhead"></th>
<th class="filterhead"></th>
</tr>
<tr>
<th>Serial</th>
<th>Name</th>
<th>Project Reference</th>
<th>Basic Profile</th>
<th>Employment Permits</th>
<th>Last Updated</th>
</tr>
</thead>
<tbody>
<?php
while($row = sqlsrv_fetch_array( $sql_stmt,SQLSRV_FETCH_NUMERIC)){
$row_num = $row[0];
$name = strtoupper($row[1]);
$pr_stats = intval($row[3]);
$bp_stats = intval($row[4]);
$ep_stats = intval($row[5]);
$update_date = $row[2]->format("d-M-y");
echo"<tr>";
echo "<td>".$row_num."</td>";
echo "<td>".$name."</td>";
<!------------td with hidden div and appears only when mouse hover---------->
echo "<td class='prbk' data-id='".$pr_stats."'><a href='#'>".$pr_stats."%</a>";
echo "<div>
Data: 123<br>
Data: Asdwqeasd<br>
Data: 525</a>
</div></td>";
echo "<td>".$bp_stats."%</td>";
echo "<td>".$ep_stats."%</td>";
echo "<td>".$update_date."</td>";
echo "</tr>";
}
?>
</tbody>
</table>
JS:
$('#pic_table').DataTable({
columnDefs: [
/**************** to have HTML tags removed for sorting/filtering*********/
{
targets: 0,type: 'html'
}
],initComplete: function () {
/************add filter header to each column************/
var i = 0;
this.api().columns().every(function () {
var column = this;
var select = $('<select><option value="">All</option></select>')
.appendTo($('.filterhead').eq(i).empty())
.on('change',function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '',true,false)
.draw();
});
column.data().unique().sort().each(function (d,j) {
if (column.index() == 2) {
d = $(d).text();
}
select.append('<option value="' + d + '">' + d + '</option>')
});
i++;
});
}
});
/*******************************Hover**********************************/
var span = document.querySelectorAll('.prbk');
hideAll();
for (var i = span.length; i--;) {
(function () {
var t;
span[i].onmouseover = function () {
hideAll();
clearTimeout(t);
this.className = 'hoverbghover';
};
span[i].onmouseout = function () {
var self = this;
t = setTimeout(function () {
self.className = 'hoverbg';
},300);
};
})();
}
function hideAll() {
for (var i = span.length; i--;) {
span[i].className = 'hoverbg';
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。