0

Tengo un DataTable en Jquery y quisiera saber si es posible que el buscador que trae incorporado me permita buscar solo por 1 tipo de dato.

Lo que me gustaría hacer es que el dato a buscar sea el email.

Y si se escribe cualquier cosa que no sea el email no debería mostrar nada. Aunque coincida el valor con alguna columna, pero mientras no sea el email no debería funcionar.

Además debe ser exacto, es decir, el email completo, porque pueden haber muchos email que los primeros caracteres sean idénticos, o de dominio distinto, como por ejemplo:

  • roberto@gmail.com
  • roberto432@gmail.com
  • roberto@yahoo.cl

Y el buscador debería poder diferenciar el uno con el otro, ya que no son iguales.

El problema es que no se muy bien como controlar la información a buscar en un datatable, para poder buscar por email.

Dejo un ejemplo:

$(document).ready( function () {
    $('#Mytable').DataTable({
        language:{
            sProcessing: "Procesando...",
            sLengthMenu: "Mostrar _MENU_ Registros",
            sZeroRecords: "No se encontraron resultados relacionados",
            sEmptyTable: "No hay ningún dato disponible para esta tabla",
            sInfo: "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros.",
            sInfoEmpty: "Mostrando registros del 0 al 0 de un total de 0 registros",
            sInfoFiltered: "(Filtrado de un total de _MAX_ registros)",
            sSearch: "Buscar:",
            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"
            }
        }
    });
});
table tbody tr td{
  text-align: center;
}
body{

  font-family: 'Segoe UI';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>

<table id="Mytable">
  <thead>
    <tr>
      <th>ID</th>
      <th>NOMBRE</th>
      <th>DIRECCION</th>
      <th>EMAIL</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>1</td>
      <td>Pedro Muñoz</td>
      <td>Calle Los Arbolitos #321</td>
      <td>pedro@gmail.com</td>
    </tr>
    
    <tr>
      <td>2</td>
      <td>Juan Castro</td>
      <td>Avenida Central Edificio - El Alto P.7 #301</td>
      <td>juan@gmail.com</td>
    </tr>
    
    <tr>
      <td>3</td>
      <td>Roberto Riquelme</td>
      <td>Calle La estrecha #432</td>
      <td>roberto@yahoo.com</td>
    </tr>
    
    <tr>
      <td>4</td>
      <td>Alicia Godoy</td>
      <td>Avenida La Grande Edificio El Gigante P12 #432</td>
      <td>alice121@gmail.com</td>
    </tr>
    
    <tr>
      <td>5</td>
      <td>Alicia Fernandez</td>
      <td>Avenida La Grande Edificio El Gigante P12 #432</td>
      <td>alice121@gmail.com</td>
    </tr>
    
    <tr>
      <td>6</td>
      <td>Jimena Lagos</td>
      <td>Calle La tierra #123</td>
      <td>Jime6879@outlook.com</td>
    </tr>
    
    <tr>
      <td>7</td>
      <td>Camilo Rios</td>
      <td>Calle La Laguna #543</td>
      <td>CamiloT@yahoo.com</td>
    </tr>
    
    <tr>
      <td>8</td>
      <td>Pedro Paredez</td>
      <td>Avenida Predera Verde Edificio El Rascacielo P15 #654</td>
      <td>pedroPrz543@outlook.com</td>
    </tr>
    
    <tr>
      <td>9</td>
      <td>Camila Reyes</td>
      <td>Calle Los Sentidos Av. El Pensamiento #321</td>
      <td>cami798@outlook.com</td>
    </tr>
    
    <tr>
      <td>10</td>
      <td>Camila Godoy</td>
      <td>Avenida El Farol - Calle 213 n°432</td>
      <td>camy768@yahoo.com</td>
    </tr>
    
    <tr>
      <td>11</td>
      <td>Antonio Reyes</td>
      <td>Calle El Gato - #748</td>
      <td>anton789@gmail.com</td>
    </tr>
    
    <tr>
      <td>12</td>
      <td>Antonia Reyes</td>
      <td>Calle El Gato - #748</td>
      <td>anto_68@yahoo.com</td>
    </tr>
  </tbody>
</table>

1 respuesta 1

2

Te dejo un este enlace donde se esta filtrando por el campo mail.

http://jsfiddle.net/sbdhL346/

Lo que estamos haciendo es que cada vez que exista un evento en nuestro input. Obtenemos los campos de la columna 3, buscamos en esos campos contra el valor del input y pintamos de nuevo la tabla.

$('.dataTables_filter input').unbind().bind('keyup', function() {
  table.column( 3).search( this.value ).draw();
});

Obtención de una columna https://datatables.net/reference/api/column()

Busqueda de datos en un la tabla https://datatables.net/reference/api/search()

Pintamos de nuevo nuestra tabla https://datatables.net/reference/api/draw()

Te adjunto este enlace de datatables donde se esta realizando un filtro por columna, que te puede resultar útil.

https://datatables.net/examples/api/multi_filter.html

Un saludo!

9
  • para que tu respuesta se considere como válida debes colocar los ejemplos aquí, pues solo poner enlaces se considera de baja calidad ya que si dejan de estar disponibles, la respuesta deja de ser útil
    – user75901
    el 15 ene. 2019 a las 15:02
  • Di a guardar sin querer, la respuesta esta editada. @shadow el 15 ene. 2019 a las 15:06
  • @JairoRoderoVilla. Gracias por responder, mira estuve probando y el DataTable igual me busca si escribo algo que no sea el email, cuando el buscador no debería funcionar si escribo algo que no sea el email.
    – M4uriXD
    el 15 ene. 2019 a las 15:16
  • @M4uriXD Hola no comprendo, muy bien la duda que tienes. Por lo que te entiendo, tu quieres que la tabla busque por el campo mail, pero si metes otro campo que no actue, es decir, que la tabla no se filtre. Ahora bien como sabe el input que tu quieres meter un mail o no? Como mucho lo único que se me ocurre es que, mediante un patrón de email en javascript entre o no al código que filtra la tabla. stackoverflow.com/questions/46155/… el 15 ene. 2019 a las 15:25
  • @M4uriXD si esta filtrando bien la columna de email, si agregas una fila adicional en donde los valores de toda la fila no se parescan veras que si filtra correctamente, ahora cabe recalcal que el search( this.value ) realiza un filtrado muy parecido a un like %% de sql, quizas hay esta el inconveniente. Como te dicen en los comentarios tendras que utilizar algun patron de email. el 15 ene. 2019 a las 15:30

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.