具有多个输入字段/搜索条件的表上的 jQuery 实时过滤器？

Question

我已经在我的网站上使用了 jQuery live 过滤器 http://chris-spittles.co.uk/jquery-filter-table/

这效果非常好。此后，我的客户要求我提供三个可以过滤数据的输入。他们将共同努力过滤表格。

我在这里设置了一个 fiddle : http://jsfiddle.net/NVL5h/5/

我想要的结果是，在过滤器 1 中我可以输入书籍，然后在过滤器 2 中我可以输入日期。现在，该表将仅显示其中包含与过滤器输入匹配的类型或日期的结果。同样，我想在过滤器 3 中输入一本书名，这样现在我可以搜索具有

'输入或日期或书名'

这对于我拥有的脚本来说是可能的吗？或者是否有另一个脚本已经满足了这个要求？我确定是这样，只是不确定如何。我确实尝试了一些修补，但没有成功。 fiddle 按照设计工作，我刚刚添加了我想要过滤的附加输入字段。

Answer 1

您可能想尝试一下 datatables jquery 插件。它几乎可以满足您在表管理方面的任何需求

https://datatables.net/

我采用了您的 fiddler 示例，并对用于执行多列过滤的 datatable.js 文件进行了一些更改。

http://jsfiddle.net/M2mUF/

$(document).ready(function () {
    var oTable = $('.liveFilterList').dataTable({
        "oLanguage": {
            "sSearch": "Search all columns:"
        }
    });

    $("tfoot input").keyup(function () {
        /* Filter on the column (the index) of this element */
        oTable.fnFilter(this.value, $("tfoot input").index(this));
    });

   /*
    * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
    * the footer
    */
   $("tfoot input").each(function (i) {
       asInitVals[i] = this.value;
   });

   $("tfoot input").focus(function () {
       if (this.className == "search_init") {
           this.className = "";
           this.value = "";
       }
   });

   $("tfoot input").blur(function (i) {
       if (this.value == "") {
           this.className = "search_init";
           this.value = asInitVals[$("tfoot input").index(this)];
       }
   });
});

希望这有帮助