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>
excelente. muchas gracias!
Me alegro que haya gustado
No, no funciona,.. además es un ejemplo extremadamente largo para explicar un propósito bien especifico y concreto, el código me parece muy intrincado, siendo que JS se caracteriza por una sintaxis compacta y muy entendible.
Hazlo de nuevo.
Buenicimo la verdad
Buenisimo* :v
Esta muy buena la función, y anda de maravilla. Pero cuando lo pongo en un servidor PHP no funciona, no es lo único con JS o Jquery que no funciona sobre servidor PHP y no logro dar con el problema.