How to edit this table filter script to filter by selected columns?

问题

I am using this script:

(function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

        var _input;

        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }

        function _filter(row) {
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

})(document);

and this input:

<input type="search" class="light-table-filter" data-table="order-table">

When I type something in the filter input, it filters a table so I see only entries I have in there matching the text. Like this: http://codepen.io/chriscoyier/pen/tIuBL How can I edit this script so it does not filter by the whole table, but instead only by some selected columns? Like maybe the first three columns is what I need to filter through.

回答1:

I would add data attribute to configure what columns are searchable. For example HTML could be like this:

<input type="search" class="light-table-filter" 
       data-table="order-table" 
       data-table-columns="0,2" placeholder="Filter">

In the above config indexes 0 and 2 tell that "Name" and "Phone" columns are filterable.

Then in JS part you can do something like this (only modified functions):

function _onInputEvent(e) {
    _input = e.target;
    var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
    var columns = (_input.getAttribute('data-table-columns') || '').split(',');
    Arr.forEach.call(tables, function (table) {
        Arr.forEach.call(table.tBodies, function (tbody) {
            Arr.forEach.call(tbody.rows, function (row) {
                _filter(row, columns);
            });
        });
    });
}

function _filter(row, columns) {
    var text, val = _input.value.toLowerCase();
    if (columns.length) {
        columns.forEach(function (index) {
            text += ' ' + row.cells[index].textContent.toLowerCase();
        });
    } else {
        text = row.textContent.toLowerCase();
    }
    row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}

Demo: http://codepen.io/anon/pen/zxVagm

回答2:

I would suggest you add an array with the column names you want to apply the filter and in the _filter fuction check if the row name or title is in array with the columns to apply the filter.

I don't know JavaScript so much the code would be like below with the rigth field names:

var _input = ...;
var columnsToApplyFilter = ["column 1", "column 2"];

función _filter(...) {
    if (columnsToApplyFilter.contains(row.columnTitle) {
        // apply filter
    }
}

回答3:

You can rewrite the _onInputEvent and slice the number of rows with Array.slice.

Adding a data attribute that determine what rows to slice seems like a good idea

<input type="search" data-count="[0,3]" class="light-table-filter" data-table="order-table" data-count="[0,3]" placeholder="Filter">

Where, 0 is the start index, in this case the first row, and 3 is the end index, non-inclusive, so [0,3] would only filter on row 1, 2 and 3 (index 0,1 and 2).

And, removing a lot of the strangeness ?

(function (document) {
    'use strict';

    var LightTableFilter = (function (Arr) {

        function _onInputEvent(e) {
            var selector = '.' + e.target.getAttribute('data-table') + ' tbody tr';
            var count    = JSON.parse(e.target.getAttribute('data-count'));
            var rows     = document.querySelectorAll(selector);

            Arr.slice.apply(rows, count).forEach(function (row) {
                _filter(row, e.target)
            });
        }

        function _filter(row, _input) {
            var text = row.textContent.toLowerCase(),
                val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function () {
                var inputs = document.querySelectorAll('.light-table-filter');

                Arr.forEach.call(inputs, function (input) {
                    input.addEventListener('input', _onInputEvent, false);
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function () {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

})(document);

来源：https://stackoverflow.com/questions/29577854/how-to-edit-this-table-filter-script-to-filter-by-selected-columns