如何使用jQuery与分页进行实时表搜索？

我有很多页面的大表，我发现有些代码可以做一个实时表搜索，但它只在页面上有效，已经显示。我如何使它对所有数据有效？如何使用jQuery与分页进行实时表搜索？

$(document).ready(function() { 
    $(".search").keyup(function() { 
    var searchTerm = $(".search").val(); 
    var listItem = $('.results tbody').children('tr'); 
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('") 

    $.extend($.expr[':'], {'containsi': function(elem, i, match, array){ 
     return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
    }); 

    $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){ 
    $(this).attr('visible','false'); 
    }); 

    $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){ 
    $(this).attr('visible','true'); 
    }); 

    var jobCount = $('.results tbody tr[visible="true"]').length; 
    $('.counter').text(jobCount + ' item'); 

    if(jobCount == '0') {$('.no-result').show();} 
    else {$('.no-result').hide();} 
      }); 
});

感谢

来源

2016-08-19 Flasking

嗯。我在想，如果在搜索框上的按键事件中删除分页并加载所有数据，那么可以通过这种方式实时搜索所有数据。希望这是有道理的 –

根据你的搜索代码，这是不可能的搜索未插入到表中的数据，你可以做的是，你可以在一个表中插入的所有数据第一次加载。

例如：假设你有67记录页面大小10，现在就不会有7页。现在，您可以在页面加载时将67 <tr>插入表格中，并且只在第一页上显示前10 <tr>，并隐藏其他57 <tr>。在第2页上，您可以显示11-20行并隐藏其他行。与其他页面类似，现在，当您运行您的js代码时，您将获得期望的结果。

但是，加载表中第一次加载的所有数据将增加页面加载时间，也不是一个好的方法。

来源

2016-08-19 09:06:01

如何使用jQuery与分页进行实时表搜索？

回答

相关问题