用於html表格的Isotope.js過濾

Question

同位素過濾是否適用於HTML表格？我想要做的是使用搜索表單進行過濾，因此我的聯繫人列表將根據搜索框的值進行過濾。這是我爲這個Fiddle樣品小提琴和同位素我的示例代碼：

var $container = $('.rm-data').isotope({ 
    // options 
}); 
$('#search').on('keypress', function (e) { 
    if (e.which == 13) { 
     var query = $('#search').val(); 
     $container.isotope({ 
      filter: query 
     }); 
     console.log(query); 

    } 
}); 

感謝您的任何建議。

Answer 1

同位素似乎搞亂表格格式，但它似乎工作正常。你可以根據名字進行匹配。

<tbody="rm-data"> 

需要是

<tbody class="rm-data"> 

，然後在查詢前面加上一個點，因此將過濾的類名

$container.isotope({ filter: "."+query }); 

然後它的作品。小提琴：http://jsfiddle.net/HEdc2/4/

但是，如果您希望能夠搜索表中任何單元格的內容，則需要一個fancier過濾器。

$('#search').on('keypress',function(e){ 
    if(e.which == 13){ 
     var query = $('#search').val(); 
     query = "tr:contains("+query+")"; 
     $container.isotope({ filter: query }); 
     console.log(query); 

    } 
}); 

似乎做的伎倆。 http://jsfiddle.net/HEdc2/5/

但是，jQuery的:contains()選擇器區分大小寫，所以如果你想不區分大小寫的搜索，你必須找出一些東西。這個問題的答案可能有所幫助：How do I make jQuery Contains case insensitive, including jQuery 1.8+?