2

Estou a criar um input para pesquisa na minha tabela, mas estou com problemas na paginação na página onde faço a busca.

Página onde crio a tabela e faço a paginação normal:

<div id="resultado">
 <h1>Alerta Recebido</h1>
<?php if($num > 0){ ?>
    <table class="table table-responsive">  
    <thead>
        <tr> 
            <th width="20%" style="text-align:center;">De</th>
            <th width="60%" style="text-align:center;">Assunto</th>
            <th width="10%" style="text-align:center;">Prioridade</th>
            <th width="10%" style="text-align:center;">Recebido</th>                
        </tr>
        </thead>
        <tr>
        <thead>
    <?php  

        do{

         if($nomede != $produto["De"]){
    ?>  
        <th width="10%" colspan=4>Recebido: <?php echo $produto["Data"]; ?></th>
    <?php
        $nomede = $produto["De"];
        }
   ?>
        </tr>
        </thead>
        <tbody>
        <tr>  
        <td ><?php echo $produto["De"]; ?></td>
        <td class="td-info view_data apagar" id="<?php echo $produto["Id"]; ?>,<?php echo $produto["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $produto["Status"] != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '?>><?php echo $produto["Assunto"]; ?></td>  
        <td><?php echo $produto["Prioridade"]; ?></td> 
        <td><?php echo $produto["Hora"]; ?></td>
        </tr>
</div>          
<?php } while($produto = $result->fetch_assoc()); ?>
<tbody>
    </table>
<nav>
<ul class="pagination">
<li>
<a href="./recebidas?pagina=0" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<?php 
for($i=0;$i<$num_paginas;$i++){
$estilo = "";
if($pc == $i)
$estilo = "class=\"active\"";
?>
<li <?php echo $estilo; ?> ><a href="./recebidas?pagina=<?php echo $i; ?>"><?php echo $i+1; ?></a></li>
<?php } ?>
<li>
<a href="./recebidas?pagina=<?php echo $num_paginas-1; ?>" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
<?php } ?>
</div>

Depois criei um form com o input de pesquisa:

<form action="./busca">
    Buscar por: <input type="text" name="campo" id="campo">
</form>

Jquery:

$('#campo').keyup(function(){
    $('form').submit(function(){
        var dados = $(this).serialize();

        $.ajax({
            url: './busca',
            method: 'post',
            dataType: 'html',
            data: dados,
            success: function(data){
                $('#resultado').empty().html(data);
            }
        });

            return false;
    });
        $('form').trigger('submit');
});

Na página busca tenho o código da seguinte forma:

$itens_por_pagina1 = 10;

// pegar a pagina atual
$pagina1 = intval($_GET['pagina']);
if(empty($pagina1) && $pagina1 !=0){
$pc1 = "0";
} else {
$pc1 = $pagina1;
}
$inicio1 = $pc1 - 0;
$inicio1 = $inicio1 * $itens_por_pagina1;

$campo = mysqli_real_escape_string($conn, $_POST["campo"]); 

$query1 = "SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De like '%$campo%' ORDER BY Recebido Desc LIMIT $inicio1, $itens_por_pagina1";

$result1 = $conn->query($query1) or die($conn->error);

$produto1 = $result1->fetch_assoc();

$num1 = $result1->num_rows;

$num_total1 = $conn->query("SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De like '%$campo%'  
ORDER BY Recebido Desc")->num_rows;

$num_paginas1 = ceil($num_total1/$itens_por_pagina1);

echo '
     <h1>Alerta Recebido</h1>';
    if($num1 > 0){ ?>
    <table class="table table-responsive">  
    <thead>
        <tr> 
            <th width="20%" style="text-align:center;">De</th>
            <th width="60%" style="text-align:center;">Assunto</th>
            <th width="10%" style="text-align:center;">Prioridade</th>
            <th width="10%" style="text-align:center;">Recebido</th>                
        </tr>
        </thead>
        <tbody>
        <tr>
    <?php
        do{
    ?>          
        <td ><?php echo $produto1["De"]; ?></td>
        <td class="td-info view_data apagar" id="<?php echo $produto1["Id"]; ?>,<?php echo $produto1["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $produto1["Status"] != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '?>><?php echo $produto1["Assunto"]; ?></td>  
        <td><?php echo $produto1["Prioridade"]; ?></td> 
        <td><?php echo $produto1["Hora"]; ?></td>
        </tr>

<?php } while($produto1 = $result1->fetch_assoc()); ?>
<tbody>
</table>
<nav>
<ul class="pagination">
<li>
<a href="./busca?pagina=0" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<?php 
for($i=0;$i<$num_paginas1;$i++){
$estilo = "";
if($pc1 == $i)
$estilo = "class=\"active\"";
?>
<li <?php echo $estilo; ?> ><a href="./busca?pagina=<?php echo $i; ?>"><?php echo $i+1; ?></a></li>
<?php } ?>
<li>
<a href="./busca?pagina=<?php echo $num_paginas1-1; ?>" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
<?php } ?>

Ele pesquisa e mostra a paginação como mostro nas imagens:

Primeiro quando abro a página sem pesquisa: inserir a descrição da imagem aqui

Segunda imagem, quando pesquiso e só preenche uma página, funciona bem, como mostro na imagem:

inserir a descrição da imagem aqui

Terceira imagem, quando pesquiso por algo que gera mas do que uma página, ao inicio funciona bem, como mostro:

inserir a descrição da imagem aqui

Quarta imagem é onde surge o problema, na pesquisa que mostro na imagem anterior, quando mudo de página (por exemplo pagina 2) perde o filtro (volta a retorna as 6 páginas como na primeira imagem) e sai da página principal e vai para a página onde faço a busca, como mostro na imagem: inserir a descrição da imagem aqui

Mas ao mudar de página devia continuar a mostrar os resultados da busca dentro da div, sem mudar de página.

0

4 Respostas 4

1
+25

Terás de manter o termo da pesquisa guardado tal como a página para filtrar posteriormente na query ao servidor.
Um exemplo de como a URL deve ficar é busca?termo="xxxx"&pagina=2, e assim consegues recolher esses parâmetros da URL e passá-los ao servidor.

No entanto, se o uso de biblioteca externa não for um problema, recomendo o uso do DataTables, que faz tudo o que procuras e a sua configuração é bem simples.

0

Não sei se entendi corretamente, mas tentando entender, eu notei isso:

<a href="./busca?pagina=<?php echo $i; ?>">

Isso é a sua paginação, simplesmente ?pagina={n}, mas não indica qual seria a busca, eu acredito que isso deveria ser:

<a href="./busca?pagina=<?= $i ?>&campo=<?= $campo ?>">

Dessa forma você conseguiria saber qual é a busca e então paginar sobre ela. Se não quiser alterar o AJAX para GET, poderia alterar o:

if(isset($_GET["campo") && !isset($_POST["campo"])) {
    $_POST["campo"] = $_GET["campo"]
}

$campo = mysqli_real_escape_string($conn, $_POST["campo"]); 

Isso também pode ser resolvido no Javascript, como ele não tem nada que faça o que você quer ("mas ao mudar de página devia continuar a mostrar os resultados da busca dentro da div, sem mudar de página.").

Adicione, além do código existente para busca, isso:

$('.pagination').on("click", function(e) {
    e.preventDefault();

  if (e.target instanceof HTMLAnchorElement) {
 $.ajax({
    url: e.tagert.href,
    method: 'post',
    dataType: 'html',
    data: $('form').serialize(),
    success: function(data){
      $('#resultado').empty().html(data);
    }
  });
  }



});

Isso irá simplesmente fazer o mesmo do PHP. Isso irá requisitar a página que está no <a>, porém enviará a entrada que está no input, assim como vez para a busca.

0

Use sessões para guardar em uma variavel, o que foi pesquisado. Da forma que você está fazendo, ele pega o valor do campo mas ao trocar de página esse campo passa a ter valor vazio. Você pode usar cookies também, mas eu prefiro sessions.

Exemplo de sessão:

<?php

    session_start();
    $_SESSION["filtroBusca"] = $_POST["campo"];

?>

Você pode dar uma olhada no próprio Manual do PHP - Sessions

0

Resolvi desta forma. Na página onde consulta os alertas criei este form:

<form class="form-inline" method="GET" action="./busca">
    <div class="form-group">
        <label for="exampleInputName2">Pesquisar</label>
        <input type="text" name="busca" class="form-control" id="exampleInputName2" placeholder="Digitar...">
    <button type="submit" class="btn btn-primary">Pesquisar</button>
    </div>
</form>

Na página de busca coloquei o seguinte código: PHP:

$pagina = (isset($_GET['pagina']))? $_GET['pagina'] : 1;
if(!isset($_GET['busca'])){
    header("Location: ./recebidas");
}else{
    $valor_pesquisar = $_GET['busca'];
}

//Selecionar todos os cursos da tabela
$result_curso = "SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De LIKE '%$valor_pesquisar%'";
$resultado_curso = mysqli_query($conn, $result_curso);

//Contar o total de cursos
$total_cursos = mysqli_num_rows($resultado_curso);

//Seta a quantidade de cursos por pagina
$quantidade_pg = 10;

//calcular o número de pagina necessárias para apresentar os cursos
$num_pagina = ceil($total_cursos/$quantidade_pg);

//Calcular o inicio da visualizacao
$incio = ($quantidade_pg*$pagina)-$quantidade_pg;

//Selecionar os cursos a serem apresentado na página
$result_cursos = "SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De like '%$valor_pesquisar%' ORDER BY Recebido Desc limit $incio, $quantidade_pg";
$resultado_cursos = mysqli_query($conn, $result_cursos);
$produto = mysqli_num_rows($resultado_cursos);

Html:

<form class="form-inline" method="GET" action="./busca">
    <div class="form-group">
        <label for="exampleInputName2">Pesquisar</label>
        <input type="text" name="busca" class="form-control" id="exampleInputName2" placeholder="Digitar...">
    <button type="submit" class="btn btn-primary">Pesquisar</button>
    </div>
</form>
 <h1 style="font-size: 30px"><strong>Alerta Recebido</strong></h1>
    <table class="table table-responsive"> 

    <thead>
        <tr> 
            <th width="20%" style="text-align:center;">De</th>
            <th width="60%" style="text-align:center;">Assunto</th>
            <th width="10%" style="text-align:center;">Prioridade</th>
            <th width="10%" style="text-align:center;">Recebido</th>                
        </tr>
        </thead>
        <tr>
        <thead>
    <?php  

        do{

         if($nomede != $produto["De"]){
    ?>  
        <th width="10%" colspan=4>Recebido: <?php echo $produto["Data"]; ?></th>
    <?php
        $nomede = $produto["De"];
        }
   ?>
        </tr>
        </thead>
        <tbody>
        <tr>  
        <td ><?php echo $produto["De"]; ?></td>
        <td class="td-info view_data apagar" id="<?php echo $produto["Id"]; ?>,<?php echo $produto["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $produto["Status"] != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '?>><?php echo $produto["Assunto"]; ?></td>  
        <td><?php echo $produto["Prioridade"]; ?></td> 
        <td><?php echo $produto["Hora"]; ?></td>
        </tr>

<?php } while($produto = $resultado_cursos->fetch_assoc()); ?>
<tbody>
    </table>
<?php
                //Verificar a pagina anterior e posterior
    $pagina_anterior = $pagina - 1;
    $pagina_posterior = $pagina + 1;
?>
            <nav class="text-center">
                <ul class="pagination">
                    <li>
                        <?php
                        if($pagina_anterior != 0){ ?>
                            <a href="./busca?pagina=<?php echo $pagina_anterior; ?>&busca=<?php echo $valor_pesquisar; ?>" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        <?php }else{ ?>
                            <span aria-hidden="true">&laquo;</span>
                    <?php }  ?>
                    </li>
                    <?php 
                    //Apresentar a paginacao
                    for($i = 1; $i < $num_pagina + 1; $i++){ ?>
                        <li><a href="./busca?pagina=<?php echo $i; ?>&busca=<?php echo $valor_pesquisar; ?>"><?php echo $i; ?></a></li>
                    <?php } ?>
                    <li>
                        <?php
                        if($pagina_posterior <= $num_pagina){ ?>
                            <a href="./busca?pagina=<?php echo $pagina_posterior; ?>&busca=<?php echo $valor_pesquisar; ?>" aria-label="Previous">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        <?php }else{ ?>
                            <span aria-hidden="true">&raquo;</span>
                    <?php }  ?>
                    </li>
                </ul>
            </nav>

Assim funciona bem. Só tem um problema, só pesquisa depois de clicar no botão pesquisar que está dentro do form, não faz a pesquisa dinâmica. Mas esse aspecto é uma melhoria, por enquanto resolve o meu problema

7
  • Resolveria com session, que daria pra fazer de forma dinamica e usaria bem menos linha de código. As funções keyup e keydown também são uma boa pedida, porque assim que você soltar ou pressionar as teclas, já pode pegar o valor digitado no campo e ir buscando. Commented 13/06/2019 às 1:39
  • @Diéfani Favareto Piovezan pode colocar um exemplo com session?
    – Bruno
    Commented 13/06/2019 às 1:49
  • @Diéfani Favareto Piovezan agradecia muito se me ajudasse a implementar o que sugeriu...nunca criei um sistema de paginação e busca e a forma que coloquei aqui como resposta foi a única que funcionou
    – Bruno
    Commented 13/06/2019 às 14:07
  • Para ativares a pesquisa enquanto digitas basta ativar o .change() no input e aí simular o click no submit do form. No entanto, recomendo que só simules o click depois de serem digitas um número mínimo de caracteres, por exemplo 3.
    – iamdlm
    Commented 13/06/2019 às 14:49
  • @iamdlm pode colocar um exemplo com o change() no input?
    – Bruno
    Commented 13/06/2019 às 15:36

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 .