Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andrey Knupp Vital

[Resolvido] Carregando mais dados ao dar Scroll na Página

Por , em PHP

Recommended Posts

Andrey Knupp Vital    136

Andrey Knupp Vital
Postado

Olá gente !

A Algum tempo, um amigo meu tinha perguntado como fazia

pra carregar mais dados quando o scroll da página chegar ao fim

no caso não é uma página, seria mais uma div, mais vocês podem fazer da página inteira :P

Então podemos fazer da seguinte maneira, primeiro vamos criar a tabela:

DELIMITER //
CREATE DEFINER =`root`@`localhost` PROCEDURE `usuarios`()
LANGUAGE SQL
NOT DETERMINISTIC
CONTAINS SQL
SQL SECURITY DEFINER
COMMENT ''
BEGIN
   SELECT * FROM `db`.`usuarios` ORDER BY `nome` DESC;
END //
DELIMITER ;

CREATE TABLE `usuarios` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
 	`nome` VARCHAR( 15 ) NOT NULL,
 	`sobrenome` VARCHAR( 25 ) NOT NULL,
 	`email` VARCHAR( 72 ) NULL,
`cidade` VARCHAR( 40 ) NULL,
   PRIMARY KEY( `id` )
)
COLLATE='latin1_swedish_ci' ENGINE=InnoDB ROW_FORMAT=DYNAMIC

Flush Status;
Reset Query Cache;

 

Criei uma procedure pra fazer um cache das informações, assim não iremos ficar fazendo vários

selects no banco de dados em busca dos mesmos resultados ^_^

 

Segue o código abaixo:

<!doctype html>
<html>
   <head>
       <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
       <script type="text/javascript">
          function getHTTPObject(){  
               if( window.XMLHttpRequest ){  
                       return new XMLHttpRequest();  
               }else if( window.ActiveXObject ){  
                   var prefix = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP", "MSXML.XMLHTTP", "MSXML3.XMLHTTP"];  
                   for( var i = 0; i < prefix.length; ++i ){  
                       try{  
                           return new ActiveXObject( prefix[ i ] );  
                       }catch( e ){}  
                   }  
               }  
          }
          window.onload = function(){
              var element = document.getElementById( 'conteudo' );
              var limit = parseInt( document.getElementById( 'limit' ).value );
              var XMLHttp = getHTTPObject();
              element.onscroll = function(){
                  if( element.scrollTop + element.offsetHeight >= element.scrollHeight ){
                      XMLHttp.open( 'GET', 'results.php?limit='+limit, true );
                      XMLHttp.onreadystatechange = function(){
                          if( XMLHttp.readyState == 4 ){
                              var Response = XMLHttp.responseText;
                              limit = document.getElementById( 'limit' ).value = limit + 15;
                              window.setTimeout(function(){
                                   document.getElementById( 'conteudo' ).innerHTML = Response
                              }, 600);
                          }
                      }
                      XMLHttp.send();
                  }
              }
          }
       </script>
   </head>
   <body>
       <input type="hidden" value="15" id="limit" />
       <div id="conteudo" style="width:120; height:400px; overflow-y:scroll;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna purus, venenatis id faucibus sollicitudin, mollis nec sem. Aliquam vestibulum congue aliquam. Proin bibendum urna sed purus imperdiet quis sodales risus viverra. Phasellus laoreet tincidunt ullamcorper. Suspendisse ac enim mollis lectus adipiscing posuere eu eget ipsum. Fusce ut nisl elit. Praesent sit amet arcu elit, quis imperdiet nunc. Vivamus aliquam tempus lobortis. Suspendisse et purus nec nibh accumsan sagittis vitae commodo elit. Cras augue magna, rutrum quis feugiat viverra, ornare eget risus. Nunc tincidunt neque facilisis justo dignissim fringilla. Ut aliquet, nibh eu sodales laoreet, nibh ante varius orci, eget.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna purus, venenatis id faucibus sollicitudin, mollis nec sem. Aliquam vestibulum congue aliquam. Proin bibendum urna sed purus imperdiet quis sodales risus viverra. Phasellus laoreet tincidunt ullamcorper. Suspendisse ac enim mollis lectus adipiscing posuere eu eget ipsum. Fusce ut nisl elit. Praesent sit amet arcu elit, quis imperdiet nunc. Vivamus aliquam tempus lobortis. Suspendisse et purus nec nibh accumsan sagittis vitae commodo elit. Cras augue magna, rutrum quis feugiat viverra, ornare eget risus. Nunc tincidunt neque facilisis justo dignissim fringilla. Ut aliquet, nibh eu sodales laoreet, nibh ante varius orci, eget.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna purus, venenatis id faucibus sollicitudin, mollis nec sem. Aliquam vestibulum congue aliquam. Proin bibendum urna sed purus imperdiet quis sodales risus viverra. Phasellus laoreet tincidunt ullamcorper. Suspendisse ac enim mollis lectus adipiscing posuere eu eget ipsum. Fusce ut nisl elit. Praesent sit amet arcu elit, quis imperdiet nunc. Vivamus aliquam tempus lobortis. Suspendisse et purus nec nibh accumsan sagittis vitae commodo elit. Cras augue magna, rutrum quis feugiat viverra, ornare eget risus. Nunc tincidunt neque facilisis justo dignissim fringilla. Ut aliquet, nibh eu sodales laoreet, nibh ante varius orci, eget.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna purus, venenatis id faucibus sollicitudin, mollis nec sem. Aliquam vestibulum congue aliquam. Proin bibendum urna sed purus imperdiet quis sodales risus viverra. Phasellus laoreet tincidunt ullamcorper. Suspendisse ac enim mollis lectus adipiscing posuere eu eget ipsum. Fusce ut nisl elit. Praesent sit amet arcu elit, quis imperdiet nunc. Vivamus aliquam tempus lobortis. Suspendisse et purus nec nibh accumsan sagittis vitae commodo elit. Cras augue magna, rutrum quis feugiat viverra, ornare eget risus. Nunc tincidunt neque facilisis justo dignissim fringilla. Ut aliquet, nibh eu sodales laoreet, nibh ante varius orci, eget.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna purus, venenatis id faucibus sollicitudin, mollis nec sem. Aliquam vestibulum congue aliquam. Proin bibendum urna sed purus imperdiet quis sodales risus viverra. Phasellus laoreet tincidunt ullamcorper. Suspendisse ac enim mollis lectus adipiscing posuere eu eget ipsum. Fusce ut nisl elit. Praesent sit amet arcu elit, quis imperdiet nunc. Vivamus aliquam tempus lobortis. Suspendisse et purus nec nibh accumsan sagittis vitae commodo elit. Cras augue magna, rutrum quis feugiat viverra, ornare eget risus. Nunc tincidunt neque facilisis justo dignissim fringilla. Ut aliquet, nibh eu sodales laoreet, nibh ante varius orci, eget.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna purus, venenatis id faucibus sollicitudin, mollis nec sem. Aliquam vestibulum congue aliquam. Proin bibendum urna sed purus imperdiet quis sodales risus viverra. Phasellus laoreet tincidunt ullamcorper. Suspendisse ac enim mollis lectus adipiscing posuere eu eget ipsum. Fusce ut nisl elit. Praesent sit amet arcu elit, quis imperdiet nunc. Vivamus aliquam tempus lobortis. Suspendisse et purus nec nibh accumsan sagittis vitae commodo elit. Cras augue magna, rutrum quis feugiat viverra, ornare eget risus. Nunc tincidunt neque facilisis justo dignissim fringilla. Ut aliquet, nibh eu sodales laoreet, nibh ante varius orci, eget.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi urna purus, venenatis id faucibus sollicitudin, mollis nec sem. Aliquam vestibulum congue aliquam. Proin bibendum urna sed purus imperdiet quis sodales risus viverra. Phasellus laoreet tincidunt ullamcorper. Suspendisse ac enim mollis lectus adipiscing posuere eu eget ipsum. Fusce ut nisl elit. Praesent sit amet arcu elit, quis imperdiet nunc. Vivamus aliquam tempus lobortis. Suspendisse et purus nec nibh accumsan sagittis vitae commodo elit. Cras augue magna, rutrum quis feugiat viverra, ornare eget risus. Nunc tincidunt neque facilisis justo dignissim fringilla. Ut aliquet, nibh eu sodales laoreet, nibh ante varius orci, eget.
       </div>
   </body>
</html>

 

O código PHP:

<?php
      /**
       * Regata o novo limite a ser mostrado 
       * Fazendo o cast para número inteiro
       */
      $Limit = isset( $_GET['limit'] ) ? (integer)$_GET['limit'] : 0;
      /**
       * Faz a conexão com o banco de dados
       * Para poder listar os dados
       */
      $PDO = new PDO( 'mysql:host=localhost;dbname=db', 'root', 'sua senha' );
      $PDO->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
      $PDO->setAttribute( PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC );
      /**
       * Traz todos os dados do banco de dados
       * Navegando pelo cache das querys
       */
      $SQLQuery = $PDO->query( 'CALL usuarios()' )->fetchAll();
      /**
       * Se não tiver nenhum resultado, para o script
       */
      if( sizeOf( $SQLQuery ) == 0 ){
          exit;
      }
      echo '<ul>';
      /**
       * Cria um limite dos resultados
       */
      foreach( new LimitIterator( new ArrayIterator( $SQLQuery ), 0, $Limit ) as $Data ){
                   echo '<li>', $Data[ 'id' ], '</li>';       
      }
      echo '</ul>';

Os registros da tabela pra vocês testarem ficam por conta de vocês ;)

 

Se vocês quiserem um 'where' ao selecionar o usuário, podem fazer o seguinte:

DELIMITER //
CREATE DEFINER =`root`@`localhost` PROCEDURE `usuarios`( IN userid INT )
       LANGUAGE SQL
       NOT DETERMINISTIC
       CONTAINS SQL
       SQL SECURITY DEFINER
       COMMENT ''
BEGIN
   SELECT * FROM `db`.`usuarios` WHERE `id` = userid ORDER BY `nome` DESC;
END //
DELIMITER ;

 

Pra chamar pelo WHERE, é assim:

$SQLQuery = $PDO->query( 'CALL usuarios( id do usuário )' )->fetchAll();

Um abraço galera ! :P

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito