如何使用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與分頁進行實時表搜索？

回答

相關問題