0

Boa noite. Estou tendo alguns problemas para fazer outra função funcionar junto com o jQuery. A função jQuery está funcionando como eu gostaria, porém, a que criei não.

Na verdade ela está quase funcionando por completo, essa função seleciona todos os nomes da tabela e faz um filtro trazendo só o nome selecionado no combo box e dando hide nos demais. Ela funciona, porém, só na página da tabela que estou, se eu seleciono algum nome que está na segunda página (Ex: Diego), ele não vem para a primeira página como deveria dando hide nos demais. Mas os nomes que estão na segunda página da table o combo box faz a leitura.

Alguém poderia me ajudar e ter alguma dica de o que estou errando no código?

P.s: A combo box está sem css e posicionamento, mas é a que se encontra em baixo da coluna "Nome".

//Iniciar função jQuery de filtros padrões
$(document).ready(function() {
  $('#tab').dataTable({ordering:false});
});
//End

//Inicia função do combobox
function AdicionarFiltro(tabela, coluna) {
  var cols = $("#" + tabela + " thead tr:first-child th").length;
  if ($("#" + tabela + " thead tr").length == 1) {
    var linhaFiltro = "<tr>";
    for (var i = 0; i < cols; i++) {
      linhaFiltro += "<th></th>";
    }
    linhaFiltro += "</tr>";

    $("#" + tabela + " thead").append(linhaFiltro);
  }

  var colFiltrar = $("#" + tabela + " thead tr:nth-child(2) th:nth-child(" + coluna + ")");

  $(colFiltrar).html("<select id='filtroColuna_" + coluna.toString() + "'  class='filtroColuna'> </select>");

  var valores = new Array();

  $("#" + tabela + " tbody tr").each(function() {
    var txt = $(this).children("td:nth-child(" + coluna + ")").text();
    if (valores.indexOf(txt) < 0) {
      valores.push(txt);
    }
  });
  $("#filtroColuna_" + coluna.toString()).append("<option>TODOS</option>")
  for (elemento in valores) {
    $("#filtroColuna_" + coluna.toString()).append("<option>" + valores[elemento] + "</option>");
  }

  $("#filtroColuna_" + coluna.toString()).change(function() {
    var filtro = $(this).val();
    $("#" + tabela + " tbody tr").show();
    if (filtro != "TODOS") {
      $("#" + tabela + " tbody tr").each(function() {
        var txt = $(this).children("td:nth-child(" + coluna + ")").text();
        if (txt != filtro) {
          $(this).hide();
        }
      });
    }
  });

};
AdicionarFiltro("tab", 2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<center>
  <h1>Log das Integrações</h1> 
</center>
<div class="table-responsive">
  <table id="tab" class="display table" width="100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>Valor</th>
        <th>Erro</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>Davi</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Charles</td>
        <td>200</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Sravani</td>
        <td>400</td>
        <td>Sim</td>
      </tr>
      <tr>
        <td>004</td>
        <td>Davi</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>005</td>
        <td>Ingrid</td>
        <td>800</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>006</td>
        <td>Letícia</td>
        <td>400</td>
        <td>Sim</td>
      </tr>

      <tr>
        <td>007</td>
        <td>Ronaldo</td>
        <td>800</td>
        <td>Sim</td>
      </tr>
      <tr>
        <td>008</td>
        <td>Mike</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>009</td>
        <td>Andrew</td>
        <td>300</td>
        <td>Sim</td>
      </tr>

      <tr>
        <td>010</td>
        <td>Stephen</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>011</td>
        <td>Julio</td>
        <td>400</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>012</td>
        <td>Marcos</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>013</td>
        <td>Diego</td>
        <td>300</td>
        <td>Não</td>
      </tr>
    </tbody>
  </table>
</div>

1 Resposta 1

0

Encontrei no manual do dataTables versão 1.10.12, um exemplo de filtros com select input, consegui adaptar na sua tabela, veja se isso te ajuda de alguma forma:

$(document).ready(function() {
    $('#tab').DataTable( {
        initComplete: function () {
            this.api().columns(':eq(1)').every( function () {
                var column = this;
                var select = $('<br><select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<center>
  <h1>Log das Integrações</h1> 
</center>
<div class="table-responsive">
  <table id="tab" class="display table" width="100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>Valor</th>
        <th>Erro</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>Davi</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Charles</td>
        <td>200</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Sravani</td>
        <td>400</td>
        <td>Sim</td>
      </tr>
      <tr>
        <td>004</td>
        <td>Davi</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>005</td>
        <td>Ingrid</td>
        <td>00</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>006</td>
        <td>Letícia</td>
        <td>400</td>
        <td>Sim</td>
      </tr>

      <tr>
        <td>007</td>
        <td>Ronaldo</td>
        <td>800</td>
        <td>Sim</td>
      </tr>
      <tr>
        <td>008</td>
        <td>Mike</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>009</td>
        <td>Andrew</td>
        <td>300</td>
        <td>Sim</td>
      </tr>

      <tr>
        <td>010</td>
        <td>Stephen</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>011</td>
        <td>Julio</td>
        <td>400</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>012</td>
        <td>Marcos</td>
        <td>300</td>
        <td>Não</td>
      </tr>
      <tr>
        <td>013</td>
        <td>Diego</td>
        <td>300</td>
        <td>Não</td>
      </tr>
    </tbody>
  </table>
</div>

4
  • Muito obrigado pela ajuda. Com certeza ele está funcionando perfeitamente, mas a estrutura está diferente, se o combo box tivesse continuado no first-child do thead e apenas um combo box supriria perfeitamente minha necessidade, porque na verdade necessito só do filtro na coluna nomes e não um em cada coluna.
    – Roberto
    Commented 27/10/2016 às 16:46
  • @Roberto a resposta foi editada, basta agora formatar a posição do combo ou altura da row, mas isso deixo pra você... Commented 27/10/2016 às 17:28
  • Está perfeito, muito obrigado pela ajuda. Caso conheça alguma fonte boa para que eu possa aprender mais sobre javascript, eu agradeceria se me indicasse. E muito obrigado novamente.
    – Roberto
    Commented 27/10/2016 às 18:13
  • @Roberto Eu utilizo muito os manuais dos frameworks e plugins, normalmente são bem completos e tem os exemplos que podem estudados e adaptados, ah e as respostas do stack overflow também quebram um galhão! Commented 27/10/2016 às 20:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .