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/

但是，如果您希望能够搜索表格中任何单元格的内容，则需要更高级的过滤器。

$('#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+?

Isotope.js过滤html表

1 个答案: