当过滤表为空时显示自定义消息

Question

I have a table that is populated via JSON.

This table has a input box as a filter. My question is how do I display a custom message if the search doesn't return any results?

This is my filter javascript:

(function(document) {
'use strict';

var LightTableFilter = (function(Arr) {

    var _input;

    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';
}

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

Answer 1

I added data-err to indicate the id of a span to display upon no results. The span gets added in init() Also fixed bug with filter where it wasn't applying for u,n,d,e,f,i (letters in 'undefined').

  (function(document) { 'use strict'; var LightTableFilter = (function(Arr) { var _input; 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) { var rows = tbody.rows.length; var errSpan = document.getElementById(_input.getAttribute('data-err')); Arr.forEach.call(tbody.rows, function(row) { rows -= _filter(row, columns); }); errSpan.style.display = rows > 0 ? 'none' : 'inline-block'; }); }); } function _filter(row, columns) { var text = '' /* fix bug with 'undefined' */, val = _input.value.toLowerCase(); var filtered = 0; if (columns.length) { columns.forEach(function(index) { text += ' ' + row.cells[index].textContent.toLowerCase(); }); console.log(text); } else { text = row.textContent.toLowerCase(); } var display = 'table-row'; if (text.indexOf(val) === -1) { display = 'none'; filtered = 1; } row.style.display = display; return filtered; } return { init: function() { var inputs = document.getElementsByClassName('light-table-filter'); Arr.forEach.call(inputs, function(input) { var errSpanId = input.getAttribute('data-err'); var errSpan = document.createElement('span'); errSpan.id = errSpanId; errSpan.style.display = 'none'; errSpan.textContent = 'No results to display'; document.body.appendChild(errSpan); /* Should append somewhere more appropriate */ input.oninput = _onInputEvent; }); } }; })(Array.prototype); document.addEventListener('readystatechange', function() { if (document.readyState === 'complete') { LightTableFilter.init(); } }); })(document); 

 <input type='text' class='light-table-filter' data-table='example' data-table-columns='0' data-err='err-example' /> <table class='example'> <thead> <tr> <th>Column</th> </tr> </thead> <tbody> <tr> <td>One</td> </tr> <tr> <td>Two</td> </tr> <tr> <td>Three</td> </tr> </tbody> </table>