Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » buscador de todos los registros

JavaScript - buscador de todos los registros

Volver
Nuevo Tema
<<>>
 
Vista:

buscador de todos los registros

Publicado por sair (9 intervenciones) el 07/03/2019 21:51:42
Buenas tardes estimada comunidad, tengo un problema con un search, en un datatable, ya que solo busca el valor dentro de la primer pestaña seleccionada de mi datatable, y requiero que el search lo haga en toda, no solo en la pestaña seleccionada, espero me puedan apoyar, saludos.

El codigo js que tengo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function buscador() {
  // Declare variables 

  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("buscar");
  filter = input.value.toUpperCase();
  table = document.getElementById("tablaConsultaSolCuentas");
  tr = table.getElementsByTagName("tr");
 
  // Loop through all table rows, and hide those who don't match the search query

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 14
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

buscador de todos los registros

Publicado por preguntas (7 intervenciones) el 08/03/2019 05:44:08
Hola, te dejo un ejemplo para que lo adaptes a tus necesidades.

Saludos!

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Buscar: <input id="buscar" /><button id="accion">Filtrar</button>
<br/><br/>
 
<table id="tabla">
  <thead>
    <tr>
      <th>NOMBRE</th>
      <th>NOTAS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Juan
      </td>
      <td>
        Juan dice que su mejor amiga es Elena
      </td>
    </tr>
    <tr>
      <td>
        Elena
      </td>
      <td>
        Elena dice que no tiene amigos
      </td>
    </tr>
  </tbody>
</table>

JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var input = document.getElementById('buscar');
var boton = document.getElementById('accion');
 
boton.addEventListener('click', function(){
  buscar(limpiarTexto(input.value, true));
});
 
function buscar(texto){
  var tabla = document.getElementById('tabla');
  var cuerpo = tabla.querySelector('tbody');
  var filas = cuerpo.querySelectorAll('tr');
  buscarEnFilas(texto, filas);
}
 
function buscarEnFilas(texto, filas){
 
  for(var fila of filas){
    var columnas = fila.querySelectorAll('td');
    for(var columna of columnas){
      var texto_columna = limpiarTexto(columna.innerText, true);
      var index = texto_columna.indexOf(texto);
      if(existeTextoEnColumna(index)){
        fila.style.display = "table-row";
      }
      else{
        fila.style.display = "none";
      }
    }
  }
}
 
function limpiarTexto(texto, ignorar_tildes){
  texto = texto.toLowerCase();
  if(ignorar_tildes === true){
    texto = texto.replace(/á|é|í|ó|ú/g, function(letra){
    switch(letra){
      case 'á':
        return 'a';
      break;
      case 'é':
        return 'e';
      break;
      case 'í':
        return 'i';
      break;
      case 'ó':
        return 'o';
      break;
      case 'ú':
        return 'u';
      break;
    }
   });
  }
  return texto;
}
 
function existeTextoEnColumna(index){
  return (index !== -1)?true:false;
}

https://codepen.io/anon/pen/GemjPy
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

buscador de todos los registros

Publicado por sair (9 intervenciones) el 08/03/2019 17:27:15
Gracias por tu aportación, pero de igual forma solo busca en la primer pestaña, lo que quiero es que busque sobre todos los registros de un datatable, si tengo registros en 1 sola pestaña si sirve tanto tu función como la anterior mostrada, pero en caso de existir más pestañas con información no está iterando en su totalidad.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 14
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

buscador de todos los registros

Publicado por preguntas (7 intervenciones) el 08/03/2019 18:44:34
Hola Sair.

Me comentas un poco mas por favor.

Entiendo que utilizas el plugin datatable.
Tus resultados están paginados.

Quieres buscar en la tabla completa, pero esta parte la estas haciendo de manera manual siendo que el plugin da la opción.

Me explicas por favor para poder ayudarte.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

buscador de todos los registros

Publicado por SAIR (9 intervenciones) el 08/03/2019 19:17:11
utilizo esto en un jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="panel-body">
    <!--div class="col-md-12">

        <img id="spinner" src="img/spinner.gif" align="center"/>

    </div-->
    <input type="text" id="buscar" onkeyup="buscador()" placeholder="Buscar por proyecto..">
    <table class="display" id="tablaConsultaSolCuentas">
        <thead>
            <tr>
                <th>Número</th>
                <th>Proyecto</th>
                <th>Nombre</th>
                <th>Clave</th>
                <th>Descripción</th>
                <th>Fecha Solicitud</th>
                <th>Estatus</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>


y en el js tengo la función


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function buscador() {
  // Declare variables 

  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("buscar");
  filter = input.value.toUpperCase();
  table = document.getElementById("tablaConsultaSolCuentas");
  tr = table.getElementsByTagName("tr");
 
  // Loop through all table rows, and hide those who don't match the search query

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}


hasta este momento de manera automática va ocultando y mostrando los datos que aparecen en el datatable pero solo los 5 primeros registros(ya que asi configure mi datatable por pestaña), los demás registros los omite.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 14
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

buscador de todos los registros

Publicado por preguntas (7 intervenciones) el 08/03/2019 19:30:01
Aaa Ok y para mostrar los demas registros debes ir recargando la pagina, y esto va mostrando de 5 en 5 o los escondes con un display none?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

buscador de todos los registros

Publicado por sair (9 intervenciones) el 08/03/2019 19:31:52
los distribuyo mediante esta función.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var tabla_ConsultaSolCuentas = $('#tablaConsultaSolCuentas').DataTable({
 
    language: {
 
        "sProcessing":     "Procesando...",
        "sLengthMenu":     "Mostrar _MENU_ registros",
        "sZeroRecords":    "No se encontraron resultados",
        "sEmptyTable":     "Ningún dato disponible ",
        "sInfo":           "Total de _TOTAL_ registros",
        "sInfoEmpty":      "Total de 0 registros",
        "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
        "sInfoPostFix":    "",
        "sSearch":         "Buscar:",
        "sUrl":            "",
        "sInfoThousands":  ",",
        "sLoadingRecords": "Cargando...",
        "oPaginate": {
            "sFirst":    "Primero",
            "sLast":     "Último",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
        },
        "oAria": {
            "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
 
    }},
 
 
    responsive: true,
    lengthChange: true,
    rezise: true,
    //scrollY: 160,

    autoWidth: true,
    scrollX: false,
    scrollCollapse: true,
    paging: true,
    iDisplayLength: 5,
    iDisplayStart: 0,
    iMaxPageLength: 100,
    sPaginationType: "full_numbers",
    pagingType: "full_numbers",
    lengthMenu: [[-1], ["All"]],
    bSort: true,
    bPaginate: true,
    bSearch: true,
    destroy: true,
    bDestroy: true,
    bFilter: false,
    //sDom: "rt",

    sDom: "Bfrtip",
    aoColumnDefs: [{ "bSortable": false, "aTargets": [0] },  { "className": "dt-center", "targets": "_all" }],
 
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

buscador de todos los registros

Publicado por sair (9 intervenciones) el 08/03/2019 20:44:33
ya había checado esas referencias, pero no tuve exito con el código.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar