[英]table data keeps refreshing even if I apply a filter in 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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.