Autor: Rafael Martin - rafa_40005@hotmail.com
Paginação em AJAX
Vamos acompanhar os códigos dos arquivos de paginação, com alguns comentários específicos. Iniciaremos com o arquivo paginacao.asp.
Crie este arquivo e utilize o código abaixo:
<!--#include file="conexao.asp"--> <script language="JavaScript" src="js/Conteudo.js" type="text/javascript"></script> <!—veja q usamos o onload, já que podemos abrir com registro atual na tela--!> <body bgcolor="#FFFFFF" onLoad="frm.h_txt.style.visibility='hidden';quebraTexto(parent.frm.h_txt.value, 0, '')"> <form name="frm"> <table width="780" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" colspan="4"> <iframe name="txtarea" height="90" width="300" src="text.asp" frameborder="0"></iframe> <!-- campo hidden q nos ajudará para saber qual página estamos --> <input type="hidden" name="h_pgAtual" value="0"> <textarea name="h_txt" rows="1" cols="20"> <% sql = "select * from TAB_Filme" set objRS = conn.execute(sql) while not objRS.EOF %> <%=objRS("TituloOriginal")%><br> <% objRS.MoveNext wend objRS.Close set objRS = nothing %> </textarea> </td> </tr> <tr> <!-- veja que abaixo passamos o conteúdo do textarea, o campo hidde, que nos ajudará saber em qual página estamos, e - 1 quando é anterior e + 1 quando é próximo --> <td align="right" width="21%"><a href="#" onClick="quebraTexto(parent.frm.h_txt.value, (parseInt(parent.frm.h_pgAtual.value) - 1), 'Traz')">Anterior</a></td> <td width="10%"></td> <td width="23%"></td> <td align="left" width="46%"><a href="#" onClick="quebraTexto(parent.frm.h_txt.value, (parseInt(parent.frm.h_pgAtual.value) + 1), 'Frente')">Próximo</a> </td> </tr> </table> </form> </body> |
Vamos criar uma pasta js e dentro dela você criará o arquivo conteudo.asp. Aqui não tem muito segredo.
function pgAtual(comando){ if (comando == "Frente"){ frm.h_pgAtual.value = parseInt(frm.h_pgAtual.value) + 1; } else if (comando == "Traz"){ frm.h_pgAtual.value = parseInt(frm.h_pgAtual.value) - 1; } }
function quebraTexto(txt, pg, comando){ var texto = new String(txt); // Texto informado var tamanhoTexto = parseInt(texto.length); // Total de caracteres do texto var tamanhoPg = 80; // Total de caracteres por página var totalPgs = 0; // Total de páginas var pagina = parseInt(pg); if ((tamanhoTexto / tamanhoPg) > parseInt(tamanhoTexto / tamanhoPg)){ totalPgs = parseInt(tamanhoTexto / tamanhoPg) + 1; } if (pagina >= totalPgs){ return false; } if (pagina < 0){ return false; } var splText = texto.split(" "); arrTxt = new Array; // Array onde vai ser armazenado o texto quebrado arrTxt[0] = ""; var countLetras = 0; var countArr = 0; for (i=0; i < totalPgs; i++) { countLetras = 0; arrTxt[i] = ""; for (x = countArr; x < splText.length; x++){ if (countLetras >= tamanhoPg){ break; } arrTxt[i] = arrTxt[i] + splText[x] + " "; countLetras = countLetras + (splText[x].length + 1); countArr = countArr + 1; } } pgAtual(comando); txtarea.document.body.innerHTML = "<p align=justify>" + arrTxt[pagina] + "</p>"; } |
Vamos criar agora o arquivo que estará dentro do nosso iframe, o text.asp.
<body bgcolor="#FFFFFF" text="#000000" class="classBody"><p align="justify"></p>
</body> |
Bem simples, não?
Este código é muito simples. Simples até de mais. Porém, não recarrega a página na hora de fazer a paginação e é em AJAX. Estão vendo como AJAX não é tão complicado?
Até a próxima!