Question

我想为我的一个表编写一个多列过滤器。我现在不想用插件来做这件事。我发现它和它的工作但只有1列。您对如何修改所有列有任何想法吗？

$(".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

在这种情况下，您可以使用each() jquery方法。

$(".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

表多列过滤器

1 个答案: