jQuery live filter on a table with multiple input fieds / search criteria?

Question

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

This works wonderfully well. My client has since asked that I have three inputs which can filter the data. They would all work together to filter the table.

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

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

'Type OR date or BookName'

Is this possible with the script I have or perhaps is there another script that caters for this requirements already? I am sure it is, just unsure how. I did try tinker a little but without success. The fiddle works as per design, I have just added the additional input fields that I would like to filter on.

Answer 1

You may want to give the datatables jquery plugin a try. It should do just about any thing you are looking for with table management

https://datatables.net/

I took your fiddler example and made a few changes with the datatable.js file in use to do multiple column filtering.

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