6
Necesita filtrar una tabla desde fuera de la tabla, con una búsqueda de texto, casillas de verificación y selecciona. PicNet Table Filter para jQuery funciona para buscar y usar casillas de verificación fuera de la tabla ... aunque no puedo encontrar ningún ejemplo de cómo hacer que funcione un cuadro de selección. ¿Nadie sabe?jQuery filtro de tabla con texto, casillas de verificación, selecciona
** Podría estar recibiendo demasiado específico aquí, pero pensé que al menos había pregunte. *
También estoy abierto a las posibilidades que no sean PicNet.
ACTUALIZADO: Aquí está mi código hasta ahora, me gustaría una opción seleccionar en la parte superior del cuerpo por las dos casillas de verificación sí/no.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>PicNet Table Filter Demo</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="picnet.table.filter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Randomly Create Data Rows
// Initialise Plugin
var options1 = {
additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#itemone'), $('#quickfind')],
clearFiltersControls: [$('#cleanfilters')],
matchingRow: function(state, tr, textTokens) {
if (!state || !state.id) { return true; }
var val = tr.children('td:eq(2)').text();
var val2 = tr.children('td:eq(3)').text();
switch (state.id) {
case 'onlyyes': return state.value !== 'true' || val === 'yes';
case 'onlyno': return state.value !== 'true' || val === 'no';
case 'itemone': return state.value !== 'true' || val2 === 'Item 1';
default: return true;
}
}
};
$('#demotable1').tableFilter(options1);
});
</script>
<style>
* { font-family:arial; font-size:8pt;}
table, td, th { border: solid 1px silver; color:#666; padding:3px 5px 3px 5px}
th { background-color:#333; color:#fff; font-size:0.85em }
a { color:gray; }
.filtering { background-color:light-gray}
#jqtf_filters {
list-style:none;
}
#jqtf_filters li {
display:inline-block;
position:relative;
float:left;
margin-bottom:20px
}
.hidden, tr.filters { display: none;}
</style>
</head>
<body>
<b>Additional Filters for Table 1</b><br/>
Only Show Yes: <input type="checkbox" id="onlyyes"/>
Only Show No: <input type="checkbox" id="onlyno"/>
Only Show Item 1: <input type="checkbox" id="itemone"/>
<br/>
Quick Find: <input type="text" id="quickfind"/>
<br/>
<a id="cleanfilters" href="#">Clear Filters</a>
<br/><b>Table 1</b><br/>
<table id='demotable1'>
<thead>
<tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th style='width:100px;' filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th><th class="hidden" filter='false'></th></tr>
</thead>
<tbody>
<tr>
<td>Value 102</td>
<td>420</td>
<td>yes</td>
<td>Item 1</td>
<td>hello</td>
<td>01/11//2009</td>
<td></td>
<td class="hidden">Ed Head</td>
</tr>
<tr>
<td>Value 134</td>
<td>987</td>
<td>no</td>
<td>Item 2</td>
<td>hi</td>
<td>03/11//2009</td>
<td></td>
<td class="hidden">Joe Blow</td>
</tr>
<tr>
<td>Value 654</td>
<td>722</td>
<td>yes</td>
<td>Item 3</td>
<td>hello</td>
<td>04/11//2009</td>
<td></td>
<td class="hidden">Jimmy</td>
</tr>
</tbody>
</table>
</body>
</html>
+1 para el enlace con el buen complemento. –