jQuery列過濾器

我有一個應用程序，它提供了一個表中的客戶端列表。該表中有485行。在thead中有一個文本框，允許用戶過濾出現在文本框列中輸入的值。似乎只要用戶在這些字段中的一個字段中輸入字母，Firefox就會顯示有關腳本沒有響應的提示。jQuery列過濾器

在任何人提出建議之前，分頁不是一個選項 - 它的想法是顯示完整的客戶端列表，然後用戶過濾某個列中的某個值。

目前我使用下面的方法來過濾每一列：

$inputs.keyup(function() { 
    $header = $(this).closest("th").attr("data-header-name"); 
    $table = $(this).closest("table").find("tbody"); 
    $rows = $table.find("tr"); 
    $rows.not(":visible").show(0); 
    $input = $(this); 
    if(!($.trim($input.val())) == "") { 
     $rows.filter(function(i) { 
      return ($(this).find("td").filter(function() { 
       return ($(this).attr("headers") == $header) 
      }).html().toLowerCase().indexOf($input.val().toLowerCase()) == -1); 
     }).hide(0); 
    } 
});

有沒有人對如何改進這一點，以便它是快了很多什麼想法嗎？提前致謝。

JS Fiddle

問候，理查德

來源

2012-06-22 ClarkeyBoy

你檢查過jQuery數據表http://datatables.net/？ – Rodolfo

嗨Rodolfo，既然已經有人建議我可以研究一下（特別是因爲這很快就會被需要）。我不得不承認我知道這種插件，但不想將其視爲一種選擇，因爲我喜歡自己學習這些東西並提高自己的知識。 – ClarkeyBoy

看看http://www.picnet.com.au/picnet-table-filter.html。即使你不想這樣使用，你也可以查看代碼，看看它是如何以最佳方式完成的。〜500行似乎並不太多，雖然沒有查看示例HTML，但很難說。你能爲此創建一個小提琴嗎？ –

只是把這個在一起，這是不是注意到多個過濾器中的一次，但應該給你如何優化的一些想法。它只使用一個小jQuery，如果你願意，你可以很容易地用香草JS代替它。

請注意，我爲每個按鍵添加了500毫秒的延遲以防止超限，這可能會調整或可能寫得更好，但過去對我來說已經有效。此外，您可以通過預先構建查找表來獲得性能，並且在搜索操作期間不會爲jQuery調用任何內容。

var timeout = 0, 
    columns = {}; 

function doFilter(that) { 
    var column = columns[that.column], 
     filter = that.value.toUpperCase(), 
     i = column.length - 1; 

    // look for our value hide row if not found 
    while (i > -1) { 
     var display = 'none' 
     if (column[i].text.indexOf(filter) > -1) { 
      display = ''; 
     } 

     column[i].el.parentNode.style.display = display; 
     i--; 
    } 
} 


/* shouldn't have to change this stuff */ 

$('input').each(function() { 

    //Setup our columns 
    var index = $(this).parent().prevAll().length + 1; 

    this.column = index; 
    columns[index] = []; 

    // attach some data to each column 
    $('td:nth-child(' + index + ')').each(function() { 
     columns[index].push({ 
      text: this.innerHTML.toUpperCase(), 
      el: this 
     }); 
    }); 

}).on('keyup', function() { 
    //bind our event with a 500 ms delay 
    var that = this; 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     doFilter(that); 
    }, 500); 
});

演示：http://jsfiddle.net/jeff_mccoy/HDpr7/8/embedded/result/

表數據是從datatables.net（只是HTML）。希望有所幫助。

來源

2012-06-22 22:46:42 Jeff

jQuery列過濾器

回答

相關問題