Jump to content
AlexandrePrezzi

Paginação com filtro

Recommended Posts

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

 

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By asacap1000
      Galera me foi solicitado a criação de um servidor web, para disponibilizar serviços para os clientes. O que vocês recomendam?
      Tenho um servidor da DELL com windows 2016. Todo o desenvolvimento será em PHP, Javascript e companhia Ltda com conexão aos bancos de dados Mysql, SQL e ORACLE.
      Já temos um servidor que será desativado porém está utilizando uma versão muito antiga de PHP 5.4 e como base de instalação foi utilizado o WampServer. 
    • By asacap1000
      Galera me foi solicitado a criação de um servidor web, para disponibilizar serviços para os clientes. O que vocês recomendam?
      Tenho um servidor da DELL com windows 2016. Todo o desenvolvimento será em PHP, Javascript e companhia Ltda com conexão aos bancos de dados Mysql, SQL e ORACLE.
      Já temos um servidor que será desativado porém está utilizando uma versão muito antiga de PHP 5.4 e como base de instalação foi utilizado o WampServer. 
    • By dutopfave
      Boa Noite Galera, estou com dúvida em como cria um cadastra de VARIAÇÕES DE PRODUTOS.

      Ex.: Tenho um produto que é um TENIS, ai nele vou criar as VARIAÇÕES, então vou usa COR e TAMANHO.
      COR: preto, verde, azul
      TAMANHO: 39, 40, 41

      até ai blz, porém a duvida é como fazer o cadastrado de combinações de cor e tênis, tipo no banco de dados teria q fica exatamente assim....

      ID | COR | TAMANHO
      ... | preto | 39
      ... | preto | 40
      ... | preto | 41
      ... | verde | 39
      ... | verde | 40
      ... | verde | 41
      ... | azul | 39
      ... | azul | 40
      ... | azul | 41

      alguém tem alguma solução
    • By lucianfpaula
      Olá amigos, tenho uma duvida talvez simples mas não para mim hehehe. estou desenvolvendo um sistema onde a pessoa faz um cadastro simples mas preciso de uma função que não permita que a pessoa faça mais de um cadastro pelo dispositivo dela, tipo ela faz pelo celular dela com nome, email etc... mas preciso limitar o cadastro não apenas pelo email mas também pelo dispositivo, ou seja preciso de uma forma de identificar o aparelho para que não haja mais cadastro pelo mesmo dispositivo. Não sei se ficou claro minha duvida, alguém pode me ajudar? Muito grato
    • By RodrigoWD3
      Pessoal boa tarde, estou criando uma galeria com categorias no php e mysql, gostaria de saber como faço para colocar um botão -  Exibir Mais Fotos - fazendo exibir o restante dos registros na mesma pagina, teria alguma forma de limitar as fotos sem usar o LIMIT do sql? pode ser usando jQuery algo assim , obrigado
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.