Buscador datos en la tabla con Javascript

buscador javascript

El buscador esta hecho en javascript sin necesidad la librería tal como datable o Jquery. No es tan complejo el código solamente una parte de script y poner «order-table» en la clase de table que desea buscar el registro.

<script type="text/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'));
          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);
    </script>

El campo de buscador debes introducir el clase «light-table-filter en el input de buscador. Por ejemplo:

<input class="form-control col-md-3 light-table-filter" data-table="order-table" type="text" placeholder="Search.."

Y por ultimo la etiqueta table poner «order-table» es para relacionar la clase de buscador. Por ejemplo:

<table class="order-table">

Vídeo en prueba

<html>
  <head>
    <title></title>
    <meta content="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style></style>
    <script type="text/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'));
          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);
    </script>
  </head>
  <body>

    <div class="container">
      <div style="height:50px"></div>
      <h1>< tutofox /> <small>Oh my code!</small></h1>
      <p class="lead">
      <h3>Buscador con javascript</h3>
      <p>Aqui esta el ejemplo de buscador campos en la tabla sin necesidad la libreria como datatable.</p>

      <input class="form-control col-md-3 light-table-filter" data-table="order-table" type="text" placeholder="Search..">
      <hr>

      <table class="table table-bordered order-table ">
        <thead>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
        </thead>
        <tr>
          <td>Ecopetrol</td>
          <td>Maria Perez</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Contructora Amarilo</td>
          <td>Jhon Sanchez</td>
          <td>Colombia</td>
        </tr>
        <tr>
          <td>Centro comercial Primavera</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Google SAS</td>
          <td>Mario Hernando</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Bancolombia</td>
          <td>Alejandra Tamayo</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Orange SAS</td>
          <td>Andres Suarez</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Software OneTech</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Studio Takaru</td>
          <td>Yoshi Tannamuri</td>
          <td>Japan</td>
        </tr>
      </table>

    </div> <!-- /container -->

  </body>
</html>
2 comentarios

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *