¿algun truco para que funcione un filtro JQUERY dentro de una tabla html con django?
Publicado por Max (7 intervenciones) el 01/08/2018 22:33:04
Como en esta expresado en el titulo, algun modo de que la sencillez de html para que funcione un filtro para una tabla con JQUERY pueda funcionar con los datos dinamicos que se muestran en el template de django, es decir el archivo html mezclado con la vista de django. ??? gracias, !!!
adjunto algo de informacion:
esto me funciona en el navegador sin problemas:
pero si hago el cambio con mi tabla que trae los datos del modelo, por ejemplo ;
<table id="tablag" class="tablesorter table table-striped table-bordered table-hover table-condensed">
<thead>
<h2 >GENERAL: <small>Partidas, Habitaciones y/o Espacios </small><a class="btn btn-primary btn-xs" href="{% url 'general_crear' %}">Nueva</a></h2>
<label for="buscador">Buscar:</label> <input type="text" id="buscador" value=""/>
<tr>
<th><b class="text-info">Id</b></th>
<th><b class="text-info">Nombre</b></th>
<th><b class="text-info">Item General</b></th>
<th><b class="text-info">Eliminar</b></th>
</tr>
</thead>
<tbody>
{% if object_list %}
{% for generales in object_list %}
<tr>
<td> {{generales.id_general}}</td>
<td> {{generales.general}} </td>
<td> {{generales.item_general}}</td>
<td> <a class="btn btn-danger btn-xs" href="{% url 'general_borrar' generales.id_general %}">Eliminar</a></td>
</tr>
{% endfor %}
{% else %}
<tr>
No hay Propiedades que mostrar, Adicione una. Pulsando <a href="#">Aqui</a>.
{% endif %}
</tr>
</tbody>
</table>
NO funciona la busqueda NOTA : EL NOMBRE DE LA TABLA Y TODOS LOS DETALLES DE ID, LOS HE CONSIDERADO EL CODIGO QUE SUBI ES A MANERA DE EJEMPLO, Y NO ESTÁ EN ESTA SINTAXIS MI PROBLEMA, SOLO LO MUESTRO PARA ESTABLECER LA DIFERENCIA DE LA TABLA ESTATICA Y LA DIMANICA.
adjunto algo de informacion:
esto me funciona en el navegador sin problemas:
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
61
62
63
64
65
66
67
68
<html>
<body>
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>Name</th>
<th>Sports</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sachin Tendulkar</td>
<td>Cricket</td>
<td>India</td>
</tr>
<tr>
<td>Tiger Woods</td>
<td>Golf</td>
<td>USA</td>
</tr>
<tr>
<td>Maria Sharapova</td>
<td>Tennis</td>
<td>Russia</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
// When document is ready: this gets fired before body onload
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{ // Show only matching TR, hide rest of them
$("#my-table tbody>tr").hide();
$("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}else
{ // When there is no input or clean again, show everything back
$("#my-table tbody>tr").show();
}});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{"contains-ci": function(elem, i, match, array)
{return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}});
</script>
</html>
pero si hago el cambio con mi tabla que trae los datos del modelo, por ejemplo ;
<table id="tablag" class="tablesorter table table-striped table-bordered table-hover table-condensed">
<thead>
<h2 >GENERAL: <small>Partidas, Habitaciones y/o Espacios </small><a class="btn btn-primary btn-xs" href="{% url 'general_crear' %}">Nueva</a></h2>
<label for="buscador">Buscar:</label> <input type="text" id="buscador" value=""/>
<tr>
<th><b class="text-info">Id</b></th>
<th><b class="text-info">Nombre</b></th>
<th><b class="text-info">Item General</b></th>
<th><b class="text-info">Eliminar</b></th>
</tr>
</thead>
<tbody>
{% if object_list %}
{% for generales in object_list %}
<tr>
<td> {{generales.id_general}}</td>
<td> {{generales.general}} </td>
<td> {{generales.item_general}}</td>
<td> <a class="btn btn-danger btn-xs" href="{% url 'general_borrar' generales.id_general %}">Eliminar</a></td>
</tr>
{% endfor %}
{% else %}
<tr>
No hay Propiedades que mostrar, Adicione una. Pulsando <a href="#">Aqui</a>.
{% endif %}
</tr>
</tbody>
</table>
NO funciona la busqueda NOTA : EL NOMBRE DE LA TABLA Y TODOS LOS DETALLES DE ID, LOS HE CONSIDERADO EL CODIGO QUE SUBI ES A MANERA DE EJEMPLO, Y NO ESTÁ EN ESTA SINTAXIS MI PROBLEMA, SOLO LO MUESTRO PARA ESTABLECER LA DIFERENCIA DE LA TABLA ESTATICA Y LA DIMANICA.
Valora esta pregunta
0
