问

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

楠楠妈妈05乄23 发布于 2023-02-13 14:53

http

jquery

filter

搜索

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

这非常好用.我的客户后来要求我有三个可以过滤数据的输入.他们将共同努力过滤表格.

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

我想要的结果是在过滤器1中我可以输入书籍,在过滤器2中我可以输入日期.现在,该表只显示type OR date与过滤器输入匹配的结果.同样,我想在过滤器3中键入一个书名,所以现在我可以搜索具有的表结果

'输入OR日期或 BookName'

这有可能与我有的脚本或可能有另一个脚本已满足此要求？我确信它是,只是不确定如何.我确实试了一下,但没有成功.小提琴按照设计工作,我刚刚添加了我想要过滤的附加输入字段.

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)];
       }
   });
});

希望这可以帮助

2023-02-13 14:56 回答

皮皮美2_160

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签