Paginação com filtro

[AlexandrePrezzi 0]

Seguinte

Tenho uma página chamada  "teste.php" nessa página tem um formulário com vários campos que o usuário usa para fazer um filtro dos campos a serem pesquisado...

 

Ao clicar no Pesquisar (submit) ... o action da página faz a seguinte ação

 

script type="text/javascript">
                $(function($){
                    $('#meuFormulario').submit(function(){
                        
                        var dados = jQuery(this).serialize();
                        
                        jQuery.ajax({
                            type: "POST",
                            url: "src/controller/request_teste.php",
                            data: dados, 
                            cache: false,
                            beforeSend: function() {
                                $('#resultPesq').html("Carregando...");
                            },
                            success: function(e) {
                                //window.alert(e);
                                $('#resultPesq').html(e);
                            },
                            error: function() {
                                $('#resultPesq').html('Não foi encontrado dados!');
                            }
                        });
                        return false;
                    });
                    
     
 
                });
            </script>

O arquivo "request_teste.php", é quem recebe os dados do POST e faz o  tratamento desses dados....

 

Ao final desse arquivo tem um  require_once 'result_teste.php' que vem a ser o arquivo onde irá mostrar o resultado da pesquisa.

 

Nesse arquivo eu fiz uma páginação ao final do resultado.

 

Entao primeiramente o link que estou acessando é 

 

principal.php?link=teste.php  (abre a pagina com o formulário)
ao clicar em pesquisar o link nao muda

 

quando clico em página 2, é feito um refresh e a url fica principal.php?link=teste.php&pag=2

 

O que acontece é que como a página faz um refresh eu perco todos dados do meu POST e tambem preciso clicar no botão pesquisar pra carregar os dado da página 2.

 

Alguem sabe como ajustar isso ?

Se precisarem de mais informações me avisem

 

 

 

[Omar~ 87]

No básico você terá que levar a informação da busca por GET

 

teste.php

<input type="text" name="pesquisar" />

request_teste.php

/* 
 Se houver na url "pesquisar" executa ele caso não, use dados do post
 É extremamente crucial que faça um tratamento dessa var
 porque contantemente ela vai se usada na query
*/
$busca =  (isset($_GET['pesquisar']) ? urldecode($_GET['pesquisar']): $_POST['pesquisar']);
/* Se houver na url "pag" use, caso não, use 1 */
$offset = (isset($_GET['pag']) ? $_GET['pag'] : 1);

$query = "SELECT * FROM tabela WHERE coluna LIKE %{$busca}% LIMIT 100 OFFSET {$offset}";

 

Então os links de paginação ficam

<a href="principal.php?link=teste.php&pesquisar=<?= urlencode($busca) ?>&pag=2">Página 2</a>
<a href="principal.php?link=teste.php&pesquisar=<?= urlencode($busca) ?>&pag=3">Página 3</a>
etc...

 

Ou seja nada mais é que ao recarregar a página por algum link a informação do input é mantida sendo constantemente enviada pelo protocolo GET.

 

Requer muito cuidado pois isso pode ser um tiro no pé se não fazer o correto tratamento dos dados, além que softwares através de um hardware bem potente+conexão extremante alta pode derrubar sua aplicação através de centenas de acessos por segundo.

 

Então uma outra alternativa é você fazer paginação sem trocar de página fazendo somente uma requisição.

Para essa finalidade desenvolvi um script para paginação se interessar veja:

Spoiler

teste.php

<link href="AjaxRequest/AjaxRequest.v4.1.css" rel="stylesheet" type="text/css"/>
<link href="Paginator/Paginator.v1.css" rel="stylesheet" type="text/css"/>

<script src="AjaxRequest/AjaxRequest.v4.1.js" type="text/javascript"></script>
<script src="Paginator/Paginator.v1.js" type="text/javascript"></script>

<div id="resultPesq"></div>

<form method="POST" action="" id="meuFormulario" onsubmit="exemploFuncao()">
    <input type="text" id="pesquisar" name="pesquisar" />
    <button>Enviar</button>
</form>

<script>
    var resultado = = document.getElementById('resultPesq');

    function exemploFuncao() {
        var pesquisar = document.getElementById('pesquisar').value.trim();
        if (!pesquisar) {
            resultado.innerText = 'Escreva alguma coisa para pesquiar';
        } else {
            exemploFuncao.prototype = new AjaxRequest();
            exemploFuncao.prototype.formSend(
                'meuFormulario', /* #ID do formulário */
                'resultPesq', /* #ID do local onde deve ser mostrado */
                'src/controller/request_teste.php' /* Arquivo que irá receber todos os dados do formulário */
            );
        }
        return (false);
    }
</script>

request_teste.php

<?php
$pesquisar = (isset($_POST['pesquisar']) ? (trim($_POST['pesquisar'])) : false);
/*
 * Lembre de fazer o tratamento dos dados de $pesquisar antes de mandar essa
 *  informação para seu banco de dados
 */

if (!$pesquisar) {
    echo 'Pesquisar não possui valor para executar alguma query';
} else {
    $query = "SELECT * FROM tabela WHERE coluna LIKE '%{$pesquisar}%'";
    /*
     * Não vou entrar em detalhes da forma em que você manipula seu banco de dados
     * Então aqui vou supor que existem resultados para mostrar
     */
    ?> <div data-paginator=""></div> <?php
    foreach ($resultado_do_banco as $value) {
        ?>
        <div class="paginacao">
            Sou seja transcreva seu HTML como bem desejar
        </div>
        <?php
    }
    ?>
    <div data-paginator=""></div>

    <script>
        var pag = new Paginator(
            'paginacao', /* className dos itens a paginar */
            10 /* Quantos itens por página */
        );
        pag.init();
    </script>
    <?php
}

Assim sendo não importa quantas páginas tiver que nunca haverá uma troca de página, apenas estará manipulando o HTML evitando que seu servidor sofra para ficar executando querys e mais querys

 

Arquivos necessários:

https://github.com/Spell-Master/sm-web/tree/master/min/AjaxRequest

https://github.com/Spell-Master/sm-web/tree/master/min/Paginator

Para mais detalhes sobre esses meus scripts veja eles em produção no link:

https://github.com/Spell-Master/sm-web/tree/master/javascript

 

 

Outra forma também é usando JSON e localstorage que nada mais é que fazer a query armazenar os resultados em storage e quando mudar de página ao invés de fazer outra query compor o HTML com os dados armazenados.

[AlexandrePrezzi 0]

Boa tarde tudo certo ? 

 

Eu acabei conseguindo fazer por ajax mesmo ... eu na verdade fiz a chamada para o request novamente passando os dados da pesquisa e mais ou valor da página.  Com isso não precisei alterar a URL e inserir a 'pag' ... 

 

Ficou tudo por POST mesmo.

 

Por enquanto esta funcionando ... mas é sempre bom ter outras alternativas.

 

Muito obrigado pela ajuda e pelas dicas.