Olá amigos,
Hoje posto aqui um exemplo de DataTable com Bootstrap, onde você pode colocar um filtro em cada coluna.
Na verdade eu vou colocar o filtro somente na ultima coluna, mas você pode facilmente modificar código e dizer em quais colunas deseja o filtro.
Imagem do resultado
Vamos a código.
Crie uma pagina html, no head inclua os CSS e JS necessarios, que são: bootstrap.min.css, bootstrap.min.js, jquery.js, jquery.dataTables.min.js, dataTables.bootstrap.min.js.
Busque sempre a versão mais recente.
No body, inclua uma DIV container, exigencia do bootstrap, e após crie o seu layou e a tabela conforme sua preferencia, seguindo o padrão bootstrap.
Feito isso inclua no head o seguinte script:
$(document).ready(function() {
$('#tabela').DataTable( {
initComplete: function () {
var coluna_filtro = 0;
this.api().columns().every( function (mostra) {
var column = this;
coluna_filtro += 1;
/*altere o if para passar nas colunas que você deseja o filtro */
if (coluna_filtro==4){
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
}
} );
}
} );
} );
Abaixo o código completo:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="Álvaro Grisolfi">
<meta name="keywords" content="Tabela, Filtro, DataTable, Bootstrap">
<title>Tabela Com Filtro</title>
<!-- HTML5 shim and Respond.js for IE8 support
of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost/tabela/assets/dist/css/bootstrap.min.css" media="all">
<script type="text/javascript" src="http://localhost/tabla/assets/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/tabela/assets/dist/js/jquery.js"></script>
<script type="text/javascript" src="http://localhost/tabela/assets/dist/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://localhost/tabela/assets/dist/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#tabela').DataTable( {
initComplete: function () {
var coluna_filtro = 0;
this.api().columns().every( function (mostra) {
var column = this;
coluna_filtro += 1;
if (coluna_filtro==4){
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
}
} );
}
} );
} );
</script>
</head>
<body>
<div class="container-fluid">
<div class="col-sm-12 col-md-2 col-xs-12 main"></div>
<div class="col-sm-9 col-md-10 col-xs-5 main">
<h2>DataTable Bootstrap com filtro em uma coluna (uma o mais colunas)</h2>
<table id="tabela" class="table table-striped table-bordered" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Nome</th>
<th>eMail</th>
<th>Celular</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th id="nome">Nome</th>
<th id="email">eMail</th>
<th id="cel">Celular</th>
<th id="status">Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Antonio</td>
<td>email@teste1.com</td>
<td>(92) 92929-2929</td>
<td>Ativo</td>
</tr>
<tr>
<td>Pedro</td>
<td>email@teste2.com</td>
<td>(92) 3523-9299</td>
<td>Ativo</td>
</tr>
<tr>
<td>Pacheco</td>
<td>email@teste3.com</td>
<td>(92) 9292-4324</td>
<td>Ativo</td>
</tr>
<tr>
<td>Juca Pinto</td>
<td>email@teste4.com</td>
<td>(92) 5563-9299</td>
<td>Ativo</td>
</tr>
<tr>
<td>Marcos</td>
<td>email@teste5.com</td>
<td>(92) 92929-2929</td>
<td>Inativo</td>
</tr>
<tr>
<td>Silva Sauro</td>
<td>email@teste6.com</td>
<td>(92) 3224-9299</td>
<td>Ativo</td>
</tr>
<tr>
<td>Pafuncio</td>
<td>email@teste7.com</td>
<td>(92) 9292-1887</td>
<td>Ativo</td>
</tr>
<tr>
<td>Zeca Diabo</td>
<td>email@teste8.com</td>
<td>(92) 5563-9299</td>
<td>Ativo</td>
</tr>
<tr>
<td>Mauro</td>
<td>email@teste9.com</td>
<td>(92) 92929-2929</td>
<td>Ativo</td>
</tr>
<tr>
<td>Mauricio</td>
<td>email@testea.com</td>
<td>(92) 9292-9867</td>
<td>Ativo</td>
</tr>
<tr>
<td>Silvano</td>
<td>email@testeb.com</td>
<td>(92) 9292-9299</td>
<td>Ativo</td>
</tr>
<tr>
<td>Abelardo Pinto</td>
<td>email@testec.com</td>
<td>(92) 5563-9299</td>
<td>Ativo</td>
</tr>
<tr>
<td>Maciel</td>
<td>email@tested.com</td>
<td>(92) 92929-2929</td>
<td>Inativo</td>
</tr>
<tr>
<td>Justiniano Sauro</td>
<td>email@testee.com</td>
<td>(92) 9292-7465</td>
<td>Ativo</td>
</tr>
<tr>
<td>Gaucho da Fronteira</td>
<td>email@testef.com</td>
<td>(92) 9292-2775</td>
<td>Ativo</td>
</tr>
<tr>
<td>Pedro Pilintra</td>
<td>email@testeg.com</td>
<td>(92) 5563-9299</td>
<td>Inativo</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Baixe aqui o projeto
Um abraço a todos.
