Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou tentando fazer uma grid para listar clientes quando me deparei com uma muito legal em bootstrap, porém o botão do filtro não está funcionando como vi no exemplo , segue me código e exemplo. alguém pode me ajudar?
exemplo : http://bootsnipp.com/snippets/featured/panel-table-with-filters-per-column
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.filterable {
margin-top: 15px;
} margin-top: -20px;
} background-color: transparent;
border: none;
cursor: auto;
box-shadow: none;
padding: 0;
height: auto;
} color: #333;
} color: #333;
} color: #333;
}
</style>
<script language="Javascript">
//funcao dos filtros/*
Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
*/
$(document).ready(function(){
$('.filterable .btn-filter').click(function(){
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input'),
$tbody = $panel.find('.table tbody');
if ($filters.prop('disabled') == true) {
$filters.prop('disabled', false);
$filters.first().focus();
} else {
$filters.val('').prop('disabled', true);
$tbody.find('.no-result').remove();
$tbody.find('tr').show();
}
});
$('.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>
</head>
<body>
<div class="container">
<h3>The columns titles are merged with the filters inputs thanks to the placeholders attributes</h3>
<hr>
<p>Inspired by this <a href="[http://bootsnipp.com/snippets/featured/panel-tables-with-filter](http://bootsnipp.com/snippets/featured/panel-tables-with-filter)">snippet</a></p>
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Users</h3>
<div class="pull-right">
<button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
</div>
</div>
<table class="table">
<thead>
<tr class="filters">
<th><input type="text" class="form-control" placeholder="#" disabled></th>
<th><input type="text" class="form-control" placeholder="First Name" disabled></th>
<th><input type="text" class="form-control" placeholder="Last Name" disabled></th>
<th><input type="text" class="form-control" placeholder="Username" disabled></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/scripts.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</body>
</html>Obrigado por responder, fiz o teste com o script porém sem sucesso.. :(
o que aparece no console:
Propriedade desconhecida “-moz-border-bottom-right-radius”. Declaração ignorada. www.google.com.br:1
Pseudoclasse ou pseudoelemento desconhecido “-webkit-input-placeholder”. Regra ignorada devido a seletor incorreto. grid-cliente.php:25
Pseudoclasse ou pseudoelemento desconhecido “-ms-input-placeholder”. Regra ignorada devido a seletor incorreto. grid-cliente.php:31
Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:84
Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:186
Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:192
Pseudoclasse ou pseudoelemento desconhecido “-webkit-search-cancel-button”. Regra ignorada devido a seletor incorreto. bootstrap.css:196
Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:297
Esperada cor mas encontrado “auto”. Esperada cor mas encontrado “-webkit-focus-ring-color”. Esperado o término do valor mas encontrado “-webkit-focus-ring-color”. Erro no processamento do valor de “outline”. Declaração ignorada. bootstrap.css:335
Propriedade desconhecida “box-sizing”. Declaração ignorada. bootstrap.css:1882
Esperado o término do valor mas encontrado “\9 ”. Erro no processamento do valor de “margin-top”. Declaração ignorada. bootstrap.css:1888
Esperada cor mas encontrado “auto”. Esperada cor mas encontrado “-webkit-focus-ring-color”. Esperado o término do valor mas encontrado “-webkit-focus-ring-color”. Erro no processamento do valor de “outline”. Declaração ignorada. bootstrap.css:1913
Pseudoclasse ou pseudoelemento desconhecido “-webkit-outer-spin-button”. Regra ignorada devido a seletor incorreto. bootstrap.css:1917
Pseudoclasse ou pseudoelemento desconhecido “-ms-input-placeholder”. Regra ignorada devido a seletor incorreto. bootstrap.css:1966
Pseudoclasse ou pseudoelemento desconhecido “-webkit-input-placeholder”. Regra ignorada devido a seletor incorreto. bootstrap.css:1970
Propriedade desconhecida “user-select”. Declaração ignorada. bootstrap.css:2272
Esperada cor mas encontrado “auto”. Esperada cor mas encontrado “-webkit-focus-ring-color”. Esperado o término do valor mas encontrado “-webkit-focus-ring-color”. Erro no processamento do valor de “outline”. Declaração ignorada. bootstrap.css:2277
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:2301
Propriedade desconhecida “-moz-osx-font-smoothing”. Declaração ignorada. bootstrap.css:2699
Esperado “none” ou URL mas encontrado “progid”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:3596
Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5437
Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5452
Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5461
Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5470
Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:5479
Propriedade desconhecida “zoom”. Declaração ignorada. bootstrap.css:5486
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:5919
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:5928
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6002
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6007
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6088
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6094
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6406
Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:6410
Esperado “none” ou URL mas encontrado “progid”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6413
Erro no processamento do valor de “background-image”. Declaração ignorada. bootstrap.css:6419
Esperado “none” ou URL mas encontrado “progid”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6422
Esperado “none” ou URL mas encontrado “alpha(”. Erro no processamento do valor de “filter”. Declaração ignorada. bootstrap.css:6431
Esperado o término do valor mas encontrado “\9 ”. Erro no processamento do valor de “background-color”. Declaração ignorada. bootstrap.css:6490
ReferenceError: $ is not defined
Ok, desliga os erros de css e de rede.
Ai fica só com os erros/alertas de javascript.
Você tem que utilizar exatamente a mesma versão do Bootstrap.
No exemplo diz que é a 3.1.0
Mas você está utilizando uma versão muito antiga do jQuery, 1.11.0
O Bootstrap nesta versão 3.1.0 utiliza o jQuery 2.1.0
Tente isso:
Obrigado pelo conselho Alan, utilizei o Jquery (<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> ), porém também não tive sucesso o botão do filtro ainda não funciona...
William deixei só o alerta e erros do javascript e apresentou a seguinte msg:
ReferenceError: $ is not defined
Consegui arrumar pessoal vlw pela ajuda de vcs!!!
peguei o erro que apareceu no console e coloquei no google
o erro era exatamente :
2° – Você está utilizando o seu script antes de chamar a biblioteca?
Modo errado:
<script src=”SeuSCRIPT” type=”text/javascript” language=”Javascript”>
<script src=”[http://code.jquery.com/jquery-1.9.0.min.js](http://code.jquery.com/jquery-1.9.0.min.js)“></script>O correto é:
/Primeiro declarar a biblioteca Jquery/
<script src=”http://code.jquery.com/jquery-1.9.0.min.js“></script>
/Depois declarar os seus scripts que irão estar na biblioteca/
<script src=”SeuSCRIPT” type=”text/javascript” language=”Javascript”>
aparece algum erro no console ?
Ctrl + Shift + J no Firefox
troque: