webmaster

Super Paginação Com jQuery, PHP E CSS3

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

Super Paginação Com jQuery, PHP E CSS3

Paginação em AJAX é muito comum e importante em qualquer site. Hoje, o jQuery é usado para criar paginação espetacular. Vou mostrar como você pode usar o jQuery para criar paginação com estilo!

Segue uma demo e depois o código usado. Veja a demo e faça o download dos ficheiros no fim deste tutorial.

DEMO deste tutorial > Super Paginação Com jQuery, PHP E CSS3

Código JQuery


$(document).ready(function(){
function showLoader(){
$('.search-background').fadeIn(200);
}
function hideLoader(){
$('.search-background').fadeOut(200);
};

$("#paging_button li").click(function(){
showLoader();

$("#paging_button li").css({'background-color' : ''});
$(this).css({'background-color' : '#D8543A'});

$("#content").load("data.php?page=" + this.id, hideLoader);

return false;
});

$("#1").css({'background-color' : '#D8543A'});
showLoader();
$("#content").load("data.php?page=1", hideLoader);
});

Código HTML


?php
$per_page = 7;
include("dbcon.php");
$sql = "select * from records ";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>

    '.$i.'

    ';
    }?>

Ficheiro data.php




Download do código usado neste tutorial > Super Paginação Com jQuery, PHP E CSS3

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Deixe o seu comentário, participe!

14 Responses

  1. Legal, gostei deste seu post.
    Você teria algo que mostrasse assim:

    Anterior 1 2 3 Proximo

    Não consegui colocar um limitador na quantidade de páginas….
    No meu caso tenho 20 registros e ele vai direto 1 2 3 4 5 6 7

    1. tambem estou procurando uma paginação com jquery, que tenho Anterior 1 2 3 4 5 Proximo

  2. Bom dia!
    Muito bom o artigo.
    Como faço para usar o banco oracle na consulta?
    Obrigado.

  3. Será que poderia criar um tutorial para paginação em datas, igual a de agregadores de links que só mostram as postagem naquela determinada data exemplo Hoje 08/10/2011
    Espero que possam fazer isso agradeço muito e estou gostando muito do site já usei muitas coisas daqui em meu site que não sabia como fazer '-'.

  4. não funcionou cara, aparece os campos com pagina e a faxa vermelha mais o conteudo dos campos nao mostra ? criei uma tabela com o nome records e tudo mais criei campos e aparece nada…

  5. Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /home/php/public_html/demos/ajax_pagination/index.php on line 41

    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /home/php/public_html/demos/ajax_pagination/data.php on line 7

    Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in /home/php/public_html/demos/ajax_pagination/data.php on line 15

    Da erro quando tento visualizar a demonstração do artigo, por favor poderia arrumar o mesmo? Pois gostaria de ver em funcionamento…

  6. Cara esta dando este erro, porque ?

    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /home/php/public_html/demos/ajax_pagination/index.php on line 41

    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /home/php/public_html/demos/ajax_pagination/data.php on line 7

    Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in /home/php/public_html/demos/ajax_pagination/data.php on line 15

  7. Não funcionou, dá erro na linha 7
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    Mas ele trouxe jquery-1.3.2.js para index.php.

    Queria dar os parabéns pelos exemplos e a forma que vocês disponibilizam os arquivos. Eu fiz um site todo em php sem efeito nenhum para somente meus familiares acessarem e agora estou querendo dar uma repaginada, colocar efeitos. Gostei muitos dos exemplos aqui exposto, vai me ajudar muito.

  8. como posso colocar um limitador de paginas?

    no meu caso estao sendo exibidos 127 páginas

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.