即使我在 javascript 中应用过滤器，表数据也会保持刷新

Posted 2023-02-16

【中文标题】即使我在 javascript 中应用过滤器，表数据也会保持刷新

【英文标题】：table data keeps refreshing even if I apply a filter in javascript

【发布时间】：2019-01-02 05:23:22

【问题描述】：

我正在使用 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 中有一个过滤器，可以通过输入名称或用户名等来过滤数据。过滤器工作得很好。

但是搜索结果显示了一秒钟，表格被刷新，所以我的搜索结果消失了，整个表格都显示出来了。

当我停止套接字服务时，数据会保留在那里，因为没有数据来自套接字，因此表不会刷新。

只要搜索输入中有一些文本，我希望搜索结果保持不变。 我使用的这种方法有什么问题？我该如何解决这个问题？

【参考方案1】：

您可以在更改 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);
    


);

【讨论】：

这对我有用。但是当我的代码中有一个计时器时，时间也会暂停

你在哪里打印计时器？

它只显示在表格中。实际上时间来自套接字。所以根据你的代码，时间也暂停了

如果是这种情况，那么您可以删除if条件并在$('#showdata').html(html);之后调用showHide(lastValue, $('#Activity').val());函数