javascript - 即使我在 javascript 中应用过滤器,表数据也会保持刷新
问题描述
我正在使用 websocket 获取数据并将其绑定到 html。这是我的代码:
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
$('#showdata').html(html);
});
<table>
<tbody id="showdata">
</tbody>
</table>
这是我的搜索过滤器的 javascript 代码:
$('#search').keyup(function() {
var lastValue = $(this).val();
console.log(lastValue)
showHide(lastValue, $('#Activity').val());
});
function showHide(lastValue, activity) {
$(".usrRow").show();
var v;
if (lastValue.length > 0) {
$(".usrRow").each(function() {
if ($(this).attr("extn").toLowerCase().indexOf(lastValue.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
if (activity != "All") {
if ($(this).find(".callstatus").html().toLowerCase().replace("&", "&") != activity.toLowerCase()) {
$(this).hide();
}
}
});
}
}
我的问题是我在 html 中有一个过滤器,可以通过输入名称或用户名等来过滤数据。过滤器工作得很好。
但是搜索结果显示了一秒钟,表格被刷新,所以我的搜索结果消失了,整个表格都显示出来了。
当我停止套接字服务时,数据会保留在那里,因为没有数据来自套接字,因此表不会刷新。
只要搜索输入中有一些文本,我希望搜索结果保持不变。我使用的这种方法有什么问题?我该如何解决这个问题?
解决方案
您可以在更改 html 之前添加条件以检查搜索输入是否具有某些值
var sock = io('http://myip:8080',{transports: ['websocket']});
sock.on('fetchdata', function(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++){
html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].username+'</td>';
html+= '</tr>';
}
var searchText = $('#Activity').val();
if(!searchText.length){
$('#showdata').html(html);
}
});
推荐阅读
- python - 如何将图例添加到 sns 子图?
- c# - WPF中QWidget的实现问题
- excel - 如何对分组表进行排序以保持较低级别完全分组
- python - 在 Python 中读取 CSV 文件,获取列(平均)
- linux - 如何通过fifo文件获取writer和reader的进程id
- c++ - NULL 和 nullptr 是否都指向同一个地址或 NULL 不指向任何地方?(我在很多地方都看到 nullptr 指向零地址)
- spring-boot - 使用 Github Action CI/CD 时构建失败
- android - Flutter 在添加 cloud_firestore 依赖时显示错误
- javascript - 如何使用 setInterval 触发一个函数,以便我可以在某个时候停止它?
- swift - 客户端崩溃后无法重新连接到 gRPC 服务器