<style type="text/css">
.filterable {
margin-top: 15px;
}
.filterable .panel-heading .pull-right {
margin-top: -20px;
}
.filterable .filters input[disabled] {
background-color: transparent;
border: none;
cursor: auto;
box-shadow: none;
padding: 0;
height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
color: #333;
}
</style>
<div class="panel filterable block full">
<div class="panel-heading">
<h4><strong>Resultado Busqueda</strong> </h4>
<div class="pull-right">
<button onclick="Padron.tableFilter(this)" id="filter" class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
</div>
</div>
<table class="table table-hover">
<thead>
<tr class="filters">
<th class="text-center"><input type="text" class="form-control text-center" placeholder="Sección" disabled></th>
<th class="text-center"><input type="text" class="form-control text-center" placeholder="Elector" disabled></th>
<th class="text-center"><input type="text" class="form-control text-center" placeholder="Nombre" disabled></th>
<th class="text-center"><input type="text" class="form-control text-center" placeholder="Apellido Paterno" disabled></th>
<th class="text-center"><input type="text" class="form-control text-center" placeholder="Apellido Materno" disabled></th>
<th class="text-center"><input type="text" class="form-control text-center" placeholder="Calle" disabled></th>
<th class="text-center"><input type="text" class="form-control text-center" placeholder="Colonia" disabled></th>
<th class="text-center"><input type="text" class="form-control text-center" placeholder="C.P." disabled></th>
</tr>
</thead>
<tbody>
<?php foreach( $data as $people ): ?>
<tr onclick="Padron.watch(this)" data-nombre="<?php echo $people->nombre; ?>" data-apep="<?php echo $people->ape_pat; ?>" data-apem="<?php echo $people->ape_mat; ?>" data-calle="<?php echo $people->calle; ?>" data-colonia="<?php echo $people->colonia; ?>" data-codpos="<?php echo $people->codpos; ?>" data-seccion="<?php echo $people->seccion; ?>" data-elector="<?php echo $people->elector; ?>" data-edad="<?php echo $people->edad; ?>" data-numext="<?php echo $people->num_ext; ?>" data-municipio="<?php echo $people->nmpio; ?>" >
<td class="text-center"><?php echo $people->seccion; ?></td>
<td class="text-center"><?php echo $people->elector; ?></td>
<td class="text-center"><?php echo $people->nombre; ?></td>
<td class="text-center"><?php echo $people->ape_pat; ?></td>
<td class="text-center"><?php echo $people->ape_mat; ?></td>
<td class="text-center"><?php echo $people->calle; ?></td>
<td class="text-center"><?php echo $people->colonia; ?></td>
<td class="text-center"><?php echo $people->codpos; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0RmYAcrA1mI_0gIX8N8qZHbvoHxzA1kQ&callback=json"
async defer></script>-->
<script type="text/javascript">
$('.filterable .filters input').keyup(function(e){
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
/* Dirtiest filter function ever ;) */
var $filteredRows = $rows.filter(function(){
var value = $(this).find('td').eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
/* Clean previous no-result if exist */
$table.find('tbody .no-result').remove();
/* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
$rows.show();
$filteredRows.hide();
/* Prepend no-result row if all rows are filtered */
if ($filteredRows.length === $rows.length) {
$table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
}
});
</script>