Table multi column filter

Question

I want to write a multi column filter for one of my tables. I dont want for now to do it with plugins. I found that and its working but only for 1 column. Do you have any ideas how to modify it for all columns ?

$(".filter").keyup(function(e) { // filter is class 
    if (e.keyCode == 13) {
        var indexColumn = $(this).attr('data-id');
        console.log('INDEX ' + indexColumn);
        console.log("value=%o", this.value);
        //split the current value of searchInput
        var data = this.value.split(" ");
        //create a jquery object of the rows
        var jo = $("#fbody").find("tr")
            //hide all the rows
        if (this.value == "") {
            jo.show();
            return;
        }
        jo.hide();
        //Recusively filter the jquery object to get results.
        jo.filter(function(i, v) {
            var $t = $(this).children(":eq(" + indexColumn + ")");
            for (var d = 0; d < data.length; ++d) {
                if ($t.is(":contains('" + data[d] + "')")) {

                    // console.log(data[d]);
                    return true;
                }
            }
            return false;
        }).show(); //show the rows that match.
        updateTotals();
    }
});

Fiddle demo

Answer 1

You can use each() jquery method in this case.

$(".filter").each(function() {
    $(this).keyup(function(e) {
        if (e.keyCode == 13) {
            var indexColumn = $(this).attr('data-id');
            console.log('INDEX ' + indexColumn);
            console.log("value=%o", this.value);
            //split the current value of searchInput
            var data = this.value.split(" ");
            //create a jquery object of the rows
            var jo = $("#fbody").find("tr")
                //hide all the rows
            if (this.value == "") {
                jo.show();
                return;
            }
            jo.hide();
            //Recusively filter the jquery object to get results.
            jo.filter(function(i, v) {
                var $t = $(this).children(":eq(" + indexColumn + ")");
                for (var d = 0; d < data.length; ++d) {
                    if ($t.is(":contains('" + data[d] + "')")) {

                        // console.log(data[d]);
                        return true;
                    }
                }
                return false;
            }).show(); //show the rows that match.
        }
    })
});

JS Demo