Question

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

 $(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();}
          });
});

感谢

Answer 1

根据您的搜索代码，无法搜索未插入表中的数据，您可以执行的操作是您可以在第一次加载时将所有数据插入表中。

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

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

如何使用带分页的jquery进行实时表搜索？

1 个答案: