JQuery live filter on a table with multiple input parameters / search criteria?

Question

I used the jQuery live filter on my website according to http://chris-spittles.co.uk/jquery-filter-table/

It works great. Since then, my client has asked me to have three inputs that can filter data. All of them will work together to filter the table.

I have a fiddle here: http://jsfiddle.net/NVL5h/5/

My desired result is that in filter 1 I could print books, and in filter 2 I could enter a date. now the table will show only those results that have type OR date in them that correspond to the filter inputs. Similarly, I would like to enter the name of the book in filter 3 so that I can now search for table results that have

'Enter OR date or BookName'

Is it possible with the script I have or maybe there is another script that satisfies these requirements already? I am sure that this is simply insecure. I tried to lose some weight, but to no avail. The violin works by design, I just added additional input fields that I would like to filter out.

Answer 1

You might want to enable the jquery datatables plugin. It should do just about any thing you are looking for with table management.

https://datatables.net/

I took your example violinist and made a few changes to the datatable.js file, which is used to filter multiple columns.

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

Hope this helps