Search for particular record(s) (s) does not perform table filtering using JS

Asked

Viewed 63 times

-1

I have a table that lists all purchases made from certain products from your suppliers.

  • The following field inserts the product(s) (s) sought(s)).

<p> Procurar produto do fornecedor: <input id="nome" /> </p>

That when typed should return the record of a particular product. Only that is not returning the expected record. Actually it seems that is filtering the name(s) of the supplier(s) and not the product(s)).

The field I’m talking about I want use as search parameter is the field Produto that owns the stretch echo '<td>'.$exibir_colunas['produto_nome'].'</td>';.

The variable var filtro = document.getElementById('nome'); shall filter the name of the products.


  • PHP code that makes the INNER JOIN of the tables itens_compra_fornecedor, produto and fornecedor.
<?php

    require_once '../conn/connection.php';  

    try {

        $selecao = "SELECT itens_compra_fornecedor.cd_itens_compra_fornecedor, 
        fornecedor.nome AS fornecedor_nome, produto.nome AS produto_nome, 
        produto.marca, produto.codigo_barra, produto.cor, produto.tamanho, 
        produto.genero, produto.quantidade, produto.valor_compra, produto.valor_revenda,
        itens_compra_fornecedor.data_compra FROM itens_compra_fornecedor
        INNER JOIN fornecedor ON (fornecedor.cd_fornecedor = itens_compra_fornecedor.cd_fornecedor)
        INNER JOIN produto ON (produto.cd_produto = itens_compra_fornecedor.cd_produto)";
        $seleciona_dados = $conexao->prepare($selecao);
        $seleciona_dados->execute();
        $linhas = $seleciona_dados->fetchAll(PDO::FETCH_ASSOC);

    } catch (PDOException $falha_selecao) {
        echo "A listagem de dados não foi feita".$falha_selecao->getMessage();
    }
?>
  • Table showing the records and field to search for product record(s)(s).
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title> Listar itens de compra </title>
</head>
<body>

<p> Procurar produto do fornecedor: <input id="nome" /> </p>
    <table id="lista" border="1">
        <tr> <td> ID <td> Fornecedor <td> Produto <td> Marca <td> Código de barra 
        <td> Cor <td> Tamanho <td> Gênero <td> Quantidade <td> Valor de compra 
        <td> Valor de revenda <td> Data da compra </tr>
        <?php 
            // Loop para exibir as linhas
            foreach ($linhas as $exibir_colunas){
                echo '<tr>';
                echo '<td>'.$exibir_colunas['cd_itens_compra_fornecedor'].'</td>';
                echo '<td>'.$exibir_colunas['fornecedor_nome'].'</td>';
                echo '<td>'.$exibir_colunas['produto_nome'].'</td>';
                echo '<td>'.$exibir_colunas['marca'].'</td>';
                echo '<td>'.$exibir_colunas['codigo_barra'].'</td>';
                echo '<td>'.$exibir_colunas['cor'].'</td>';
                echo '<td>'.$exibir_colunas['tamanho'].'</td>';
                echo '<td>'.$exibir_colunas['genero'].'</td>';
                echo '<td>'.$exibir_colunas['quantidade'].'</td>';
                echo '<td>R$'.$exibir_colunas['valor_compra'].'</td>';
                echo '<td>R$'.$exibir_colunas['valor_revenda'].'</td>';
                echo '<td>'.date('d/m/Y H:i:s', strtotime($exibir_colunas['data_compra'])).'</td>';
                echo '</tr>'; echo '</p>';
            }
        ?>
    </table>  
</body>
</html>
  • JS code that filters the search for a given(s) record(s)
<script>
    // JS que retorna a filtragem do nome do produto comprado do fornecedor
    var filtro = document.getElementById('nome');
    var tabela = document.getElementById('lista');
    filtro.onkeyup = function() {
        var nomeFiltro = filtro.value.toLowerCase();
        for (var i = 1; i < tabela.rows.length; i++) {
            var conteudoCelula = tabela.rows[i].cells[1].innerText;
            var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
            tabela.rows[i].style.display = corresponde ? '' : 'none';
        }
    }
</script> 

1 answer

1


I first liked your solution to save server processing and data transfers. Exchange Cells[1] with Cells[2]

  • 1

    Now I get it: cd_itens_compra_fornecedor = cell[0], fornecedor_nome = cell[1], produto_nome = cell[2];

  • Thanks man, I really hadn’t realized the positions of cell[] which influence the filtering of the requested data.

Browser other questions tagged

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