Artigos .NET Paginação em AJAX

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>&nbsp;</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!