Javascript function does not work completely with jQuery

Asked

Viewed 213 times

0

Good evening. I’m having some problems making another function work together with jQuery. The jQuery function is working as I’d like, however, the one I created is not.

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

Could someone help me and get some hint of what I’m missing in the code?

P.S.: The combo box is without css and positioning, but it is the one below the column "Name".

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

javascript jquery html css

1 answer

0

I found in the dataTables manual version 1.10.12, an example of filters with select input, I was able to adapt in your table, see if this helps you in any 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>
<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>

  • Thank you so much for your help. For sure it is working perfectly, but the structure is different, if the combo box had continued in thead’s first-Hild and only one combo box would perfectly meet my need, because in fact I only need the filter in column names and not one in each column.

  • @Roberto the answer was edited, just now format the position of the combo or height of Row, but this I leave to you...

  • It’s perfect, thank you very much for your help. If you know any good fonts so I can learn more about javascript, I would appreciate it if you would tell me. And thank you again.

  • @Roberto I use the frameworks and plugins manuals a lot, usually they are very complete and have the examples that can studied and adapted, ah and the answers of the stack overflow also break a gallon!

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.