Untitled

<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="assets/dist/css/bootstrap.min.css"  media="all">

    <script type="text/javascript" src="assets/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/dist/js/jquery.js"></script>

    <script type="text/javascript" src="assets/dist/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="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">


	  <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>Teste</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>