javascript function does not work completely with jQuery

Navigation
0

Good evening. I'm having some trouble making another function work along with jQuery. The jQuery function is working as I would, but the one I created does not.

In fact, it is almost completely functional, this function selects all the names of the table and makes a filter bringing only the selected name in the combo box and giving hide in the others. It works, however, only on the page of the table that I am, if I select any name that is on the second page (Ex: Diego), it does not come to the first page as it should give hide in the others. But the names that are on the second page of the table combo box read.

Can anyone help me and have some hint of what I'm missing in the code?

Qs: The combo box has no css and placement, but is the one below the "Name" column. 

//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><scriptsrc="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><linkhref="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>
    
asked by anonymous 26.10.2016 / 21:33

1 answer

0

I found in the manual of dataTables version 1.10.12, an example of filters with select input, I could adapt in your table, see if this helps you in some way: 

$(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><scriptsrc="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><linkhref="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>
    
27.10.2016 / 03:23
PHP mail function Error in Composer when trying to create a CakePHP project