Filtrar dados sem refresh na tabela

olá, necessito de uma forma para filtrar os dados vindo do banco de dados. só que sem exibir a tabela com todos os dados cadastrados de inicio. o funcionamento seria da seguinte forma: o usuário entra na pagina e a tabela não é exibida. ela só é exibida depois que ele preencher o campo de busca com valor que ele pretende buscar. dai é mostrado a ele somente esse valor, não sendo necessário mostrar todos os dados cadastrados no inicio da página. eu consegui fazer a tabela ficar oculta e aparecer porem os dados não estão sendo filtrados no banco. se alguém souber oque pode ser agradeço!

<?php
session_start();
ob_start();

include_once "dao/livrodao.class.php";
include_once "modelo/livro.class.php";

$livDAO = new LivroDAO();
$array = $livDAO->buscarLivros();
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Consulta livro</title>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
  <link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="vendor/components/jquery/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script>
  <script src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
  <body>
      <div class="container">
        <h1 class="jumbotron bg-info">Consulta de livros</h1>

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Sistema</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">

              <li class="nav-item active">
                <a class="nav-link" href="index.php">Home</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="cadastro-livro.php">Cad. Livros <span class="sr-only"></span></a>
              </li>

              <li class="nav-item">
                <a class="nav-link" href="consulta-livro.php">Cons. Livros <span class="sr-only">(current)</span></a>
              </li>
            </ul>
          </div>
        </nav>

        <h1>Sistema para gerenciamento de livros</h1>
        <h2>Consulta de livros</h2>
        <?php
        if(isset($array)){
          if(count($array)==0){
            echo "<h3>Não há livros cadastrados!</h3>";
            return;
          }
        ?>

        <form name="pesquisa" method="post" action="">
          <div class="row">
            <div class="form-group col-md-6">
              <input type="text" name="txtfiltro" id="filtro" class="form-control" placeholder="Digite sua pesquisa">
            </div>
            <div class="form-group col-md-6">
              <select name="selfiltro" class="form-control">
                <option value="todos">Todos</option>
                <option value="codigo">Código</option>
                <option value="titulo">Título</option>
                <option value="editora">Editora</option>
                <option value="autor">Autor</option>
                <option value="anolancamento">Ano lançamento</option>
                <option value="genero">Gênero</option>
              </select>
            </div>
          </div>

            <div class="form-group">
              <input type="submit" name="filtrar" value="Filtrar" id="pesquisa" class="btn btn-primary btn-block">
            </div>
        </form>

        <?php
          if(isset($_POST['filtrar'])){
            $pesquisa = $_POST['txtfiltro'];
            $filtro = $_POST['selfiltro'];
            $livDAO = new livroDAO();
            $array = $livDAO->filtrar($filtro, $pesquisa);

            if(count($array)==0){
              echo "<h2>Sua pesquisa não retornou nenhum livro</h2>";
              return;
            }
          }
         ?>

        <div class="table-responsive">
          <table id="tabela" class="table table-striped table-bordered table-hover table-condensed" style="display: none;">
            <thead>
              <tr>
                <th>Alterar</th>
                <th>Excluir</th>
                <th>Código</th>
                <th>Título</th>
                <th>Editora</th>
                <th>Autor</th>
                <th>Ano lançamento</th>
                <th>Gênero</th>
              </tr>
            </thead>
            <tbody class="resultado">
              <?php
                  foreach($array as $liv){
                    echo "<tr>";
                      echo "<td><a href='alterar-livro.php?id=$liv->idLivro' class='btn btn-warning'>Alterar</a></td>";
                      echo "<td><a href='consulta-livro.php?id=$liv->idLivro' class='btn btn-danger'>Excluir</a></td>";
                      echo "<td>$liv->idLivro</td>";
                      echo "<td>$liv->titulo</td>";
                      echo "<td>$liv->editora</td>";
                      echo "<td>$liv->autor</td>";
                      echo "<td>$liv->anoLanc</td>";
                      echo "<td>$liv->genero</td>";
                    echo "</tr>";
                 }//fecha foreach
               }//fecha if
              ?>
            </tbody>
          </table>
        </div>
      </div>
      <?php
        if(isset($_GET['id'])){
          $livDAO = new LivroDAO();
          $livDAO->deletarLivro($_GET['id']);
          header("location:consulta-livro.php");
        }//fecha if
       ?>

       <script type="text/javascript">

       $(document).ready(function() {

     $("#pesquisa").click(function(e) {

           $("#tabela").show("slow");
           e.preventDefault();

     });

   });
  </script>
 </body>
</html>

Para operações de consulta ao banco e, consequentemente, envio de request ao servidor e posterior response por parte deste último, a única forma que eu conheço de fazer isso sem refresh é via AJAX.

Sim, já tinha visto algumas soluções em ajax e jquery que é mais simples até.

Provavelmente é um erro na montagem da consulta. Sem os parâmetros adequados, não haverá filtro.

A consulta está OK filtra os dados mostra na view. Só que sem o efeito se eu colocar esse código jquery ele não busca. Tipo o botão parece que não chama o código php

Na verdade oque eu estou tentando imitar(implementar) é a mesma coisa que a função em ajax ou com jquery que faz uma busca sem refresh. Oque eu estou tentando ai é inventar uma forma de ocultar a table e depois que o usuário digitar no input e clicar no BTN filtrar ele faz o select e exibe a tabela mostrando somente o valor passado pelo usuário.

Certo, mas o que, exatamente, não funciona?

Quando eu adicionou esse efeito na tabela o filtrar não busca os dados do banco e apresenta na tela. A funcionalidade dela com esse efeito é só ocultar e exibir. Sem isso ele busca de boas

E se você não ocultar, funciona?

Sim

@darlan_machado vou disponibilizar o sistema no meu servidor local para voce acessar http://0986a22e.ngrok.io/Projetos_PHP/cadlivro/consulta-livro.php

Se você não oculta e funciona, mas ao ocultar não, significa que você só precisa verificar o que da funcionalidade de ocultar está afetando o funcionamento do teu sistema.