1

Objetivo - Puede ser en jquery o vanilla javascript

Pienso yo, crear filtros dependientes, es decir. Un filtro B solo podra buscar datos filtrados por filtro A. Un ejemplo seria, si en la columna A escribo c, la columna B solo podra buscar entre d o f. Si en tal caso se coloca b, no deberia pasar nada ya que este dato no esta dentro del filtro A

Codigo Actual

  1. Cuando busco A en la columna uno, y luego coloco D en la columna dos, la tabla se desaparece obviamente
  2. Estoy colocando empty, porque luego necesitaria exportar lo filtrado con excel (exportara lo que tenga la tabla en el dom)

$(document).ready(function () {
        $('#inputUno').keyup(function () {
            $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
            $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().empty();
        });
        $('#inputDos').keyup(function () {
            $("#table td.col2:contains('" + $(this).val() + "')").parent().show();
            $("#table td.col2:not(:contains('" + $(this).val() + "'))").parent().empty();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" id="inputUno"><input type="text" id="inputDos"><br>
    <table id="table" border='1'>
        <tr>
            <td class="col1" width='100px'>a</td>
            <td class="col2" width='100px'>b</td>
        </tr>
        <tr>
            <td class="col1" width='100px'>c</td>
            <td class="col2" width='100px'>d</td>
        </tr>
        <tr>
            <td class="col1" width='100px'>c</td>
            <td class="col2" width='100px'>f</td>
        </tr>
    </table>

9
  • No entiendo entonces cual es el problema si ya lograste el objetivo el 5 oct. 2018 a las 2:23
  • Parece que ya estás filtrando los datos ¿Puede que tu problema sea al quitar el filtro porque no vuelve a recuperar lo que había? el 5 oct. 2018 a las 7:17
  • Buen dia. Si, esta filtrando pero si hacemos este ejercicio, coloquemos en la columna 1 la letra c, el filtro se haria, pero ahora para la columna 2 unicamente deberia buscar registros de lo que se filtro, es decir solo deberia filtrar entre d y f @JaviMollá el 5 oct. 2018 a las 10:19
  • Buen dia. Si, esta filtrando pero si hacemos este ejercicio, coloquemos en la columna 1 la letra c, el filtro se haria, pero ahora para la columna 2 unicamente deberia buscar registros de lo que se filtro, es decir solo deberia filtrar entre d y f @AlbertoSiurob el 5 oct. 2018 a las 10:19
  • ¿Quieres decir que lo que pones en inputUno también debería filtrar lo de la columna 2? No acabo de entender lo que pretendes hacer el 5 oct. 2018 a las 10:49

4 respuestas 4

9

Pienso, humildemente, que la lógica está mal planteada. Por las siguientes razones:

  1. La eliminación de las filas que no cumplen debiera hacerse al momento de exportar la tabla y no antes. De lo contrario, si modificas los filtros, las filas que antes hubiesen cumplido ahora ya no existen.

  2. Pensemos que implementaste lo anterior y las filas no se borran sino que se marcan para borrar al momento de exportar. Tu filtro debiera ser una condición AND, pero de la manera como lo tienes planteado, puede ocurrir el siguiente flujo:

    • Escribes a en el primer input. Las filas 2 y 3 se marcan para eliminar.
    • Escribes d en el segundo input. Ahora la fila 1 se marca para eliminar (porque su columna 2 no contiene d) pero las filas 2 y 3 se marcan como si cumplieran el filtro. Básicamente, acabas de ignorar el filtro 1 porque sólo comprobaste el cumplimiento con el filtro 2. Esto no lo puedes detectar con tu approach actual porque la fila se borra y pareciera que es un filtro AND, pero en realidad el último input que recibe un keyup condiciona a toda la tabla.
  3. Al momento de exportar la tabla no basta con hacer que el elemento td quede vacío. Debieras removerlo completamente. A lo mejor te está funcionando bien la exportación, pero a mi modo de ver, un td da origen a una fila (en el excel) y cada celda da origen a una columna. Ergo, tu XLS puede tener filas en blanco. Debieras hacer un remove() en vez de un empty().

Te dejo una implementación que pienso representa mejor lo que quieres hacer:

  • Cada vez que escribes algo en cualquiera de los dos inputs, corre las dos comprobaciones. Marca con una clase no_cumple las celdas que no cumplen (letras en rojo) y una clase cumple (letras en verde) las que cumplan. De esta manera, puedes distinguir qué está haciendo el filtro exactamente.
  • Por cada fila, aquellas que contengan al menos una celda con esa clase, se marcan con la clase fila_eliminar (borde rojo). Sólo aquellas que no contengan ninguna celda que incumpla los filtros se salvarán de la carnicería final.

Con este enfoque, al momento de exportar pones:

$('#table').find('.fila_eliminar').remove();

Dale una mirada a este snippet:

$(document).ready(function() {

  $('#inputUno, #inputDos').keyup(function() {
    var cont1 = $('#inputUno').val().trim(),
      cont2 = $('#inputDos').val().trim(),
      tabla = $('#table');

    tabla.find('td.col1:contains(' + cont1 + ')')
      .removeClass('no_cumple')
      .addClass('cumple');

    tabla.find('td.col2:contains(' + cont2 + ')')
      .removeClass('no_cumple')
      .addClass('cumple');


    tabla.find('td.col1:not(:contains(' + cont1 + '))')
      .addClass('no_cumple')
      .removeClass('cumple');


    tabla.find('td.col2:not(:contains(' + cont2 + '))')
      .addClass('no_cumple')
      .removeClass('cumple');

    tabla.find('tr').removeClass('fila_eliminar').find('.col3').text('se queda');
    tabla.find('tr .no_cumple').each(function() {
      $(this).parent().addClass('fila_eliminar').find('.col3').text('se borra');
    });

  });

});
.no_cumple {
  color: red;
}

.cumple {
  color: green;
}

.fila_eliminar {
  border: 2px solid red;
}

.fila_eliminar .col3 {
  color: red;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table" border='1'>
  <thead>
    <th>
      <input type="text" id="inputUno" placeholder="texto a filtrar">
    </th>
    <th>
      <input type="text" id="inputDos" placeholder="texto a filtrar">
    </th>
    <th>
      Diagnóstico
    </th>
  </thead>
  <tbody>
    <tr>
      <td class="col1" width='100px'>a</td>
      <td class="col2" width='100px'>b</td>
      <td class="col3" width='100px'>se queda</td>
    </tr>
    <tr>
      <td class="col1" width='100px'>c</td>
      <td class="col2" width='100px'>d</td>
      <td class="col3" width='100px'>se queda</td>
    </tr>
    <tr>
      <td class="col1" width='100px'>c</td>
      <td class="col2" width='100px'>f</td>
      <td class="col3" width='100px'>se queda</td>
    </tr>
  </tbody>
</table>

Edit, objetivo reformulado:

Según tu objetivo reformulado, el filtro B sólo opera sobre las filas que sobrevivieron al filtro A. En la solución que te puse esto se logra implícitamente porque dada una combinación de A y B que descarta todas las filas, ninguna califica para la exportación.

Pero si tú quieres que el usuario primero filtre por A y luego por B, que si en B pones algo que simplemente no está entre las filas que sobrevivieron, no ocurra nada. En este caso el flujo podría ser:

  • Utilizo dos elementos <tbody>. El primero contiene las filas que no cumplen y el segundo las que sí cumplen. Los filtros mueven las filas de un <tbody> al otro.
  • El filtro B parte desactivado
  • Pongo algo en el filtro A, y algunas filas califican
  • Se desbloquea el filtro B
  • Pongo algo en el filtro B y
    • Si algunas filas califican, se aplica el filtro B en conjunto con el A
    • Si ninguna califica, el filtro B no tiene efecto
    • Si vacías el filtro B, se vuelve a aplicar el filtro A solamente
    • Si vacías el filtro A, todo vuelve al comienzo
  • Al momento de exportar, elimino el <tbody> de las que no cumplen.

$(document).ready(function() {


  $('#inputUno').keyup(function() {
    var cont1 = $('#inputUno').val().trim(),
      tabla = $('#table');


    tabla.find('td.col1:contains(' + cont1 + ')')
      .parent()
      .appendTo('#filas_cumplen');

    tabla.find('td.col1:not(:contains(' + cont1 + '))')
      .parent()
      .appendTo('#filas_no_cumplen');

    tabla.find('#filas_cumplen').find('.col3').text('se queda');
    tabla.find('#filas_no_cumplen').find('.col3').text('se borra');
    $('#inputDos').removeAttr('disabled').attr('placeholder', 'texto a filtrar').val('');

    if (cont1 === '') {
      $('#inputDos').val('').attr('disabled', true).attr('placeholder', 'debe llenar primer filtro')

    }
  });

  $('#inputDos').on('keyup', function() {
    var cont2 = $('#inputDos').val().trim(),
      tbody = $('#filas_cumplen'),
      tabla = $('#table');

    if (cont2 === '') {
      $('#inputUno').keyup();
      return;
    }
    var cumplen = tbody.find('td.col2:contains(' + cont2 + ')');
    if (cumplen.length === 0) {
      return;
    }
    tbody.find('td.col2:not(:contains(' + cont2 + '))')
      .parent()
      .appendTo('#filas_no_cumplen');

    tabla.find('#filas_cumplen').find('.col3').text('se queda');
    tabla.find('#filas_no_cumplen').find('.col3').text('se borra');

  });

});
#filas_cumplen {
  color: green;
}

#filas_no_cumplen {
  color: red;
  border: 2px solid red;
}

#filas_no_cumplen .col3 {
  color: red;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table" border='1'>
  <thead>
    <th>
      <input type="text" id="inputUno" placeholder="texto a filtrar">
    </th>
    <th>
      <input type="text" id="inputDos" placeholder="debe llenar primer filtro" disabled="true">
    </th>
    <th>
      Diagnóstico
    </th>
  </thead>
  <tbody id="filas_no_cumplen">
  </tbody>
  <tbody id="filas_cumplen">
    <tr>
      <td class="col1" width='100px'>a</td>
      <td class="col2" width='100px'>b</td>
      <td class="col3" width='100px'>se queda</td>
    </tr>
    <tr>
      <td class="col1" width='100px'>c</td>
      <td class="col2" width='100px'>d</td>
      <td class="col3" width='100px'>se queda</td>
    </tr>
    <tr>
      <td class="col1" width='100px'>c</td>
      <td class="col2" width='100px'>f</td>
      <td class="col3" width='100px'>se queda</td>
    </tr>
  </tbody>
</table>

1
  • hola, pido disculpas porque tienes razon, acabo de reformular mi objetivo el 5 oct. 2018 a las 13:53
3
+25

Te presento una alternativa utilizando Javascript Vanilla.

Se hace uso de setAttribute y getAttribute, así como de querySelectorAll. Se explican la funcionalidad con comentarios en el código

window.onload = function () {
	//Se le da el attributo hiddenbyfilter a todas las filas de la tabla
	let rows = document.querySelectorAll("#table tr");
	for (let i=0; i < rows.length; i++) rows[i].setAttribute("hiddenByFilter", 0);
	
	//Se asigna la funcion de filtrado al evento keyup 
	let input_1 = document.querySelector("#inputUno");
	input_1.addEventListener("keyup", filter);
	
	let input_2 = document.querySelector("#inputDos");
	input_2.addEventListener("keyup", filter);

}

function filter () {
		//this -> corresponde al input en el cual se da el evento keyup
		//Valor del input
		let searchValue = this.value;
		//Listado de las filas de la tabla (tr)
		let rows = document.querySelectorAll("#table tr");
		//Indicador de que columna debe filtrar el input
		let filterForColumn = this.getAttribute("filterForColumn");

		for (let i=0; i < rows.length; i++){
			//Si la fila no tiene filtro o si el nuevo filtro tiene precedencia
			if (rows[i].getAttribute("hiddenByFilter") == 0 ||
					filterForColumn <= rows[i].getAttribute("hiddenByFilter")
			){
				//Se aplica filtro a la fila
				rows[i].setAttribute("hiddenByFilter", filterForColumn);
				//Se obtiene la celda (td)
				let cell = rows[i].querySelector("td:nth-child("+filterForColumn+")");
				//Si el texto de la celda es igual al buscado o si el valor buscado es vacio
				if (cell.innerText == searchValue || searchValue === "") {
					//Se quita el filtro de la fila
					rows[i].setAttribute("hiddenByFilter", 0);
				}
			}
		}		
}
/*Muestra solo los que tengan el atributo hiddenbyfilter en 0*/
tr:not([hiddenByFilter="0"]) {
	display:none;
}
<input type="text" id="inputUno" filterForColumn="1"><input type="text" id="inputDos" filterForColumn="2"><br>
<table id="table" border='1'>
		<tr>
				<td class="col1" width='100px'>a</td>
				<td class="col2" width='100px'>b</td>
		</tr>
		<tr>
				<td class="col1" width='100px'>c</td>
				<td class="col2" width='100px'>d</td>
		</tr>
		<tr>
				<td class="col1" width='100px'>c</td>
				<td class="col2" width='100px'>f</td>
		</tr>
</table>

Como comentas requerir quitar del DOM los resultados que no coinciden con la búsqueda podrías alterar la función filter por algo similar a:

function filter () {
    let searchValue = this.value;
    let rows = document.querySelectorAll("#table tr");
    let filterForColumn = this.getAttribute("filterForColumn");

    for (let i=0; i < rows.length; i++){
        if (rows[i].getAttribute("hiddenByFilter") == 0){
            let cell = rows[i].querySelector("td:nth-child("+filterForColumn+")");
            if ( cell.innerText != searchValue ) {
                rows[i].remove();
            }
        }
    }   
}

Espero te sea de ayuda.

2

Te recomiendo hagas uso de la librería DataTable la cual te permite hacer un ordenamiento por columna, paginación, es responsiva y te provee la exportación a Csv, pdf, excel etc..

El ejemplo que he agregado te permite el filrtro por columna o de manera general

$(document).ready(function() {
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Buscar'+title+'" />' );
    } );
 
 
    var table = $('#example').DataTable({
"language": {
        search: 'Buscar:',
        "lengthMenu": "Mostrando _MENU_ registros por pagina",
        "zeroRecords": "Sin datos",
        "info": "Mostrando _PAGE_ de _PAGES_",
        "infoEmpty": "Sin registros",
        "infoFiltered": "(filtrados de _MAX_)",
paginate: {
    first: 'Primero',
    previous: 'Anterior',
    next: 'Siguiente',
    last: 'Último',
  }
    }
});
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
            </tr>
            <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
            </tr>
            <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

1
  • hola, muchas gracias. Pero quiero hacerla sin plugins el 11 oct. 2018 a las 20:57
0

como puedo filtar cuando es Multiselect

$('#selectmulti_ug').on('keyup change', function () { //'input', this.footer()
        if (table.column(9).search() !== this.value) {
            table.column(9)
                   .search(this.value)
                    .draw();
        }

HTML

   <div id="idFiltrosRGT" class="form-group col-sm-10">
                                <table id="idTablaFiltrosRGT">
                                    <thead>
                                    <th style="text-align: center; width: 12%;">Zona</th>
                                    <th style="text-align: center; width: 15%;">Tienda</th>
                                    <th style="text-align: center; width: 20%;">Estado</th>
                                    <th style="text-align: center; width: 10%;">Ultima Gestion</th>
                                    <th style="text-align: center; width: 10%;">Asesor</th>
                                    <th style="text-align: center; width: 10%;"></th>
                                    </thead>
                                    <tbody id="tblBodyFiltrosRGT">
                                    <th style="text-align: center; width: 10%;"><input type="text" class="form-control input-sm" id="txtZona" placeholder="Zona" style="font-size:10px;"/></th>
                                    <th style="text-align: center; width: 10%;"><input type="text" class="form-control input-sm" id="txtTienda" placeholder="Tienda" style="font-size:10px;"/></th>
                                    <th style="text-align: center; width: 15%;">
                                    <select id="selectmulti" multiple="multiple" >
                                    <option value="NUEVO" >NUEVO</option>
                                    <option value="PENDIENTE" >PENDIENTE</option>
                                    <option value="EN EVALUACION" >EN EVALUACION</option>
                                    <option value="DESEMBOLSADO" >DESEMBOLSADO</option>
                                    <option value="FINALIZADO" >FINALIZADO</option>
                                    <option value="VENCIDO" >VENCIDO</option>
                                    <option value="WORFLOWS" >WORFLOWS</option>
                                    </select>
                                    </th> 
                                    <th style="text-align: center; width: 10%;">

                                    <select id="selectmulti_ug" multiple="multiple" >
                                    <option value="No tiene interes ahora" >No tiene interes ahora</option>
                                    <option value="Con Interes, Proxima visita" >Con Interes, Proxima visita</option>
                                    <option value="No califica por referencias" >No califica por referencias</option>
                                    <option value="No califica por Capacidad" >No califica por Capacidad</option>
                                    <option value="Direccion no existe" >Direccion no existe</option>
                                    <option value="Direccion existe y no lo conocen" >Direccion existe y no lo conocen</option>
                                    <option value="Direccion existe y esta mudado" >Direccion existe y esta mudado</option>
                                    <option value="Con interes, fecha a Desembolsar" >Con interes, fecha a Desembolsar</option>
                                    <option value="No se encuentra, proxima visita" >No se encuentra, proxima visita</option>
                                    <option value="Con Interes, Agenda visita a Asesor" >Con Interes, Agenda visita a Asesor</option>
                                    <option value="No contesta Teléfono" >No contesta Teléfono</option>
                                    <option value="Teléfono Apagado o inhabilitado" >Teléfono Apagado o inhabilitado</option>
                                    <option value="Teléfono no existe" >Teléfono no existe</option>
                                    </select>    
                                    </th>
                                    <th style="text-align: center; width: 10%;"><input type="text" class="form-control input-sm" id="txtAsesor" placeholder="Asesor" style="font-size:10px;"/></th>
                                    <th style="text-align: center; width: 10%;">
                                        <button id="btnLimpiarHSRGT" 
                                                class="btn btn-md btn-block" 
                                                onclick="fncLimpiarRGHS()" 
                                                type="submit"> <span class="glyphicon glyphicon-erase"></span> Limpiar
                                        </button>
                                    </th>
                                    </tbody>
                                </table>
                            </div>

Gracias..!!

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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