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

Question

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

这非常好用。从那以后，我的客户要求我有三个可以过滤数据的输入。他们将一起过滤表格。

我在这里设置了一个小提琴： http://jsfiddle.net/NVL5h/5/

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

'输入OR日期或书名'

这是否可以通过我拥有的脚本实现，或者是否已经有其他脚本可以满足此要求？我确定是这样，只是不确定如何。我确实尝试过修补，但没有成功。小提琴按设计工作，我刚刚添加了我想过滤的其他输入字段。

Answer 1

您可能想尝试一下 datatables jquery 插件。它应该可以做任何你正在寻找的关于表管理的事情

https://datatables.net/

我以您的提琴手为例，对用于进行多列过滤的 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)];
       }
   });
});

希望对你有帮助