如何使用jQuery構建簡單的表格過濾器？

如何使用jQuery構建一個具有良好效果的簡單表格過濾器？ 我不介意分頁。如何使用jQuery構建簡單的表格過濾器？

list - >選擇數據庫的數據。

我不想使用插件，我更喜歡使用短代碼。

實施例： Table Filter With JQuery

來源

2011-08-13 Sheikhasa Mozali

你的意思是用'好Effect'？到目前爲止，如果你不需要插件，你有什麼？ – pimvdb

@pimvdb - hide（）效果'。我不能使用插件，因爲我的代碼尺寸很大。 –

我明白了，但你的問題有點寬泛。它與'爲我編寫代碼'問題沒有多大區別，這不是Stack Overflow的原因。您可能想要顯示一些代碼以獲取幫助。 – pimvdb

$('#inputFilter').keyup(function() { 
    var that = this; 
    $.each($('tr'), 
    function(i, val) { 
     if ($(val).text().indexOf($(that).val()) == -1) { 
      $('tr').eq(i).hide(); 
     } else { 
      $('tr').eq(i).show(); 
     } 
    }); 
});

CHECH THIS

來源

2011-08-13 17:13:45 thecodeparadox

請在http://jsfiddle.net給我例子。這是否適用於所有「分頁」？ –

@Sheikhasa Mozali我給了你小提琴。請檢查 – thecodeparadox

爲什麼消失？ – Sashka

嘗試測試行的innerHTML到輸入字段的值，顯示/隱藏取決於測試結果的內容。

$('#test').bind('keyup', function() { 
    var s = new RegExp(this.value); 
    $('tr').each(function() { 
     if(s.test(this.innerHTML)) $(this).show(); 
     else $(this).hide(); 
    }); 
});

JSFIDDLE與實例表和輸入字段。

編輯

這可能是更好地使用.text()而不是innerHTML的。 Performancewise innerHTML會更好，但.text()不接受html標籤作爲有效的搜索結果。 JSFIDDLE＃2。

來源

2011-08-13 17:00:57 rsplak

如果有'分頁'這項工作的所有數據或只爲'分頁'的同一頁？（我想工作'分頁所有頁面' ）還行吧？ –

這隻適用於當前表格頁面。因此，如果您位於第5頁上，則只會找到並過濾第5頁上的結果。 – rsplak

我通常不幫忙這一點，但我覺得無聊今天上午..

http://jsfiddle.net/hHJxP/

來源

2011-08-13 17:23:33 Jacksonkr

如何使用jQuery構建簡單的表格過濾器？

回答

相關問題