Tabela paginada e com diferenciação de cor nas linhas

Publicado por sombriks 22/08/2006

[ Hits: 5.861 ]

Homepage: http://www.google.com/profiles/Sombriks

Download paginador.html




Este trecho de código serve mais como exemplo pra alguém que precise paginar reultados de um banco de dados. Note que ele foi testado no Firefox, Konqueror, Opera e até mesmo no Internet Explorer, de modo que, de 0 a 10, eu daria 9,5. Espero que seja útil a alguém.

  



Esconder código-fonte

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <title>Resultados de ALFABETO</title>
    <style>
        h3{
    color:rgb(255,200,200);
}
h2{
    color:rgb(200,200,200);/* Ver estas três cores pra colorir as linhas da tabela.*/
}
h1{
    color:rgb(200,200,255);
}
fieldset{
   width: 50%;
   height: 50%;
}
table{
border-left: groove ;
border-right: groove ; 
background-color:rgb(200,234,255);
width: 100%;
height: 100%;
}
tr{
color: rgb(120,130,140);
}
td{

}
a{
    color: rgb(0,250,20);
    text-decoration: none;
}
a:hover{
    border-style: dashed ;
    color: rgb(250,20,0);
    text-decoration: none;
}

#data01{
   
}
#data1Header{
    border-top: groove ;   
}
#data1Footer{
    border-bottom: groove ;
}
.linhaPar{
    
}
.linhaImpar{
    
}
#line01{
    background-color: rgb(190,180,170);    
}
#line02{
    background-color: rgb(170,180,190);
}
#line03{
    background-color: rgb(190,180,170);
}
#line04{
    background-color: rgb(170,180,190);
}
#line05{
    background-color: rgb(190,180,170);
}
#line06{
    background-color: rgb(170,180,190);
}
#line07{
    background-color: rgb(190,180,170);
}
    </style>
    <!-- link type="text/css" rel="stylesheet" href="testess.css"/ -->
    <script type="text/javascript">
        <!--
        //valores das células da tabela;
        var dataGrid = []
        //Linhas visíveis;
        var viewPort = 5;
        //Primeiro da lista exibida, e não o primeiro da grade.
        var first = 2;
        //Último da lista exibida.
        var last = first+viewPort;
        //Chamado quando o corpo da página carrega
        function init(){
            /*
            Ao que parece, o processo de se capturar a tabela é a) rápido demais
            e por isso uma linha ainda nao existe a essa altura b) muito lento 
            de forma que o código continua a ser executado mesmo antes dessa 
            função terminar. por isso um try/catch se faz necessário aqui.
            */
            try{
                tabela=document.getElementById('data1');
                for(var i=0;i<=tabela.rows.length;i++){
                    dataGrid[i]=[];//Inicializando uma linha na grade javascript
                    var linha=tabela.rows[i].cells;
                    for(var j=0;j<linha.length;j++){
                        var dataLine=dataGrid[i];
                        dataLine[j]=linha[j].innerHTML;//Isto não funcionou com inerText!
                        dataGrid[i]=dataLine;
                    }
                }
            }
            catch(err){
                startViewPort();
            }
            startViewPort();
        }
        //Sempre é chamado para limpar a tabela.
        function clearTable(){
            tabela=document.getElementById('data1');
            var i=0;
            while(i<tabela.rows.length){
                tabela.deleteRow(i)
            }
        }
        /*Esse faz todo o trabalho; pega os campos salvos nos arrays e põe de volta na tabela
        
        */
        function startViewPort(){
            if(first+viewPort<dataGrid.length && first>=0){
                clearTable();
                tabela=document.getElementById('data1');
                for(var i=0;i<viewPort;i++){
                    var dataLine=dataGrid[first+i];
                    //De acordo com o W3C, eu consigo pegar uma referência à linha em tempo de criação.
                    var linha=tabela.insertRow(i);
                    for(var j=0;j<dataLine.length;j++){
                        var celula=linha.insertCell(j);
                        celula.innerHTML=dataLine[j];                        
                    }
                    if(first%2!=0){
                        if(i%2!=0)tabela.rows[i].style.background="#fdecde";
                    }
                    else{
                        if(i%2==0)tabela.rows[i].style.background="#fdecde";
                    }
                }
            }
        }
        function firstRow(){
            first=0;
            startViewPort();
        }
        function prevRow(){
            if(first!=0)first-=1;
            startViewPort();
        }/* Com as condicionais evita-se de modificar a variável de forma 
      desordenada e se ter um certo efeito de "congelamento" da página 
      visível.
     */
        function nextRow(){
            if(first!=dataGrid.length-viewPort-1)first+=1;
            startViewPort();
        }
        function lastRow(){
            first=dataGrid.length-viewPort-1;
            startViewPort();
        }
        -->
    </script>
  </head>
  <body onload="init();">
  <fieldset><legend>Tabela teste</legend>
  <table id="data1Header">
      <tr id="header1">
        <th>
          X
        </th>
        <th>
          X
        </th>
        <th>
          X
        </th>
        <th>
          X
        </th>
      </tr>
    </table>
    <table id="data1">   
      <tr id="line1">
        <td>a</td>        
        <td>a</td>
        <td>a</td>
        <td>a</td>
      </tr>
      <tr id="line2">
        <td>b</td>
        <td>b</td>
        <td>b</td>
        <td>b</td>
      </tr>
      <tr id="line3">
        <td>c</td>
        <td>c</td>
        <td>c</td>
        <td>c</td>
      </tr>
      <tr id="line4">
        <td>d</td>
        <td>d</td>
        <td>d</td>
        <td>d</td>
      </tr>
      <tr id="line5">
        <td>e</td>
        <td>e</td>
        <td>e</td>
        <td>e</td>
      </tr>
      <tr id="line6">
        <td>f</td>
        <td>f</td>
        <td>f</td>
        <td>f</td>
      </tr>
      <tr id="line7">
        <td>g</td>
        <td>g</td>
        <td>g</td>
        <td>g</td>
      </tr>
      <tr id="line8">
        <td>h</td>
        <td>h</td>
        <td>h</td>
        <td>h</td>
      </tr>
   <tr id="line9">
        <td>i</td>
        <td>i</td>
        <td>i</td>
        <td>i</td>
      </tr>
    </table>
    <table id="data1Footer">
      <tr id="footer1">
        <th>
          <button type="button" onclick="firstRow();">
           <<
          </button>
        </th>
        <th>
          <button type="button" onclick="prevRow();">
            <
          </button>
        </th>
        <th>
          <button type="button" onclick="nextRow();">
           >
          </button>
        </th>
        <th>
          <button type="button" onclick="lastRow();">
            >>
          </button>
        </th>
      </tr>
    </table>
    </fieldset>
    </body>
</html>

Scripts recomendados

Data e hora em JavaScript

Redirecionador de acordo com o browser

Adicionar/Remover Classe de um Elemento HTML

Banner Rotativo em JavaScript grava click no Mysql.

Carregador 1.0


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts