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

Question

我有一个通过 JSON 填充的表。

该表有一个输入框作为过滤器。我的问题是，如果搜索未返回任何结果，如何显示自定义消息？

这是我的过滤器 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

我添加了 data-err 来指示在没有结果时显示的范围的 ID。跨度被添加到 init() 中，还修复了过滤器不适用于 u、n、d、e、f、i(“未定义”中的字母)的错误。

    (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>