Jump to content
Lúcio Marques

Ocultar linhas de uma tabela

Recommended Posts

Olá, bom dia.

Alguém pode me dar uma força neste para esta função.

Tenho uma tabela que mostra 50 linhas de cadastro, com isso gostaria que mostrasse 25 linhas e logo abaixo haveria um botão "abrir mais" para mostrar os restantes de linhas.

Vi isso em algum site, e achei bem bacana.

 

Agradeço desde já.

Share this post


Link to post
Share on other sites

Ops,

<table width="100%" class="lista-clientes table table-striped table-bordered table-hover" id="dataTables-example">
              <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Data Cadastro</th>
                                        <th>Nome Cooperado</th>
                                        <th>CPF/CNPJ</th>
                                        <th>Ação</th>
                                    </tr>
            </thead>
                                <tbody>
<?php do { ?>
                                    <tr class="odd gradeX">
                                        <td>1</td>
                                        <td>24/07/2017</td>
                                        <td>nome 1</td>
                                        <td class="center">cpf 1</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                    <tr class="odd gradeX">
                                        <td>2</td>
                                        <td>24/07/2017</td>
                                        <td>nome 2</td>
                                        <td class="center">cpf 2</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                    <tr class="odd gradeX">
                                        <td>3</td>
                                        <td>24/07/2017</td>
                                        <td>nome 3</td>
                                        <td class="center">cpf 3</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>4</td>
                                        <td>24/07/2017</td>
                                        <td>nome 5</td>
                                        <td class="center">cpf 5</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>5</td>
                                        <td>24/07/2017</td>
                                        <td>nome 5</td>
                                        <td class="center">cpf 5</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>6</td>
                                        <td>24/07/2017</td>
                                        <td>nome 6</td>
                                        <td class="center">cpf 6</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>7</td>
                                        <td>24/07/2017</td>
                                        <td>nome 7</td>
                                        <td class="center">cpf 7</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                     <tr class="odd gradeX">
                                        <td>8</td>
                                        <td>24/07/2017</td>
                                        <td>nome 8</td>
                                        <td class="center">cpf 8</td>
                                        <td style="text-align:right; width: inherit;"> inserir/excluir</td>
                                    </tr>
                                </tbody>
                        </table>

 

Share this post


Link to post
Share on other sites

Você poderia poderia colocar os outros 25 itens dentro de uma tag tbody e escondela.

 

<table>
	<tbody>
    	<!-- AQUI VÃO OS REGISTROS QUE FICARÃO VISÍVEIS -->  
	</tbody>
	<tbody id="invisivel" style="display: none;">
    	<!-- AQUI OS REGISTROS QUE FICARÃO ESCONDIDOS -->  
	</tbody>
</table>

<!-- BOTÃO PARA MOSTRAR CONTEUDO ESSCONDIDO -->
<input type="button" onClick="document.getElementById('invisivel').style.display = 'block';" value="Abrir mais" />

 

Share this post


Link to post
Share on other sites

Oi Ivsis. eu fiz o teste e deu certo usando somente html. Mas me deparei com uma questão.

 

Eu uso banco de dados para mostrar os conteúdos. Então, não estou sabendo colocar esta sua lógica para funcionar junto.

Pois o banco de dados mostrar todos os dados cadastrados e não separa as <tbody>.

 

Já quebrei a cabeça, mas não obtive sucesso.

 

Poderia me ajudar mais uma vez nessa.

 

Agradeço desde já

Share this post


Link to post
Share on other sites

Aqui um código PHP e um JavaScript que devem resolver o seu problema. Depois deles eu explicarei como funcionam

 

$class = 'teste';
$count = 0;
while(/*FATCH DOS DADOS*/){	
	echo'
		<tr class="'.$class.'">
    		//RESTANTE DO CÒDIGO  
		</tr>  
	';
	if($count == 9){
		$class= 'teste2';
	}

	$count += 1;
	
}

 

 

count = 0;
function mostrar(){
	registros = document.getElementsByClassName('teste2');
	
	for(c = 0; c < 10; c++){
		registros[count].style.display = 'block';
		count += 1;
		if(count == registros.length){
			break;
			document.getElementById('botao').style.display = 'none';                      
		}                      
	}
}

 

O código PHP funciona assim: na variável class você deve especificar a classe usada nas suas TAGs <tr> no lugar de teste, e onde está escrito teste2 você coloca o nome da classe dos registros que ficaram escondidos, assim quando os 10 primeiros registros forem escritos a classe é alterada fazendo com que o restante dos registros fique oculto. Não se esqueça de colocar o a propriedade display: none na segunda classe. Para alterar a quantidade de registros mostrados no começo basta alterar o valor 9 no comando IF para o valor desejado.

 

No código JavaScript você deve alterar onde está teste2 para o nome da classe dos registros ocultos. O loop FOR faz com que cada vez que a função for chamada mais 10 registros sejam exibidos, para alterar essa quantidade basta alterar o numero. O IF verifica se todos os registros já foram mostrados, se sim o botão é ocultado. Não esqueça de especificar o ID do seu botão no lugar de botao.

 

Código do botão:

 

<input type="button" value="Abrir Mais" onClick="mostrar()" id="botao" />

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By CharlieAldrin
      Estou tentando fazer o seguinte codigo, onde ele pega alguns dados e salva eles em uma tabela, porém o INSERT não está salvando os dados, tem algo errado? 
       
      <?php
      session_start();
      include('config.php');
      //  id1
      // recebe pela url
      $id_busca_ajuda = $_GET['id']; 
      // id2
      // recebe pela url
      $nick_busca_ajuda = $_GET['nick']; 
      $id_ajudante = $_SESSION['usuario'];
      // nick 2
      $database = new Database();
      $db = $database->getConnection();
      $query = $db->prepare("SELECT nick_ajudante FROM sala_ajudante WHERE id_usuario_ajudante=".$_SESSION['usuario']);
      $runAjudante = $query->execute();
      $linha = $query->fetch(PDO::FETCH_ASSOC); 
      $nick_ajudante = $linha['nick_ajudante']; 
      // linha que não estpa funcionando
       $query =  $db->prepare("INSERT INTO conversa ('nick1', 'nick2', 'id1', 'id2', 'online') VALUES ('".$nick_busca_ajuda."' , '".$nick_ajudante."' , '".$id_busca_ajuda."' , '".$id_ajudante."' , '1');"); 
      $runConv = $query->execute();

      ?>
    • By Gutovr
      Pessoal, to criando um site com uma tabela de um campeonato dela eu puxo de uma tabela mysql a tabela do campeonato mas para me facilitar eu tava querendo mudar, queria puxar de uma outra tabela que criei no mysql chamado jogos onde tem o time1, placar1, placar2, time2 e a rodada do campeonato e o id daquela partida.
       
      eu queria verificar todas as vezes que o time1 vencer o time2 empatou e etc como faria está verificação sendo que tenho 10 times diferentes. Se não tiver dado para entender avisa que tendo melhorar a explicação !
       
       

    • By Gutovr
      Pessoal, to criando um site com uma tabela de um campeonato dela eu puxo de uma tabela mysql a tabela do campeonato mas para me facilitar eu tava querendo mudar, queria puxar de uma outra tabela que criei no mysql chamado jogos onde tem o time1, placar1, placar2, time2 e a rodada do campeonato e o id daquela partida.
       
      eu queria verificar todas as vezes que o time1 vencer o time2 empatou e etc como faria está verificação sendo que tenho 10 times diferentes. Se não tiver dado para entender avisa que tendo melhorar a explicação !
       
      Boa tarde! Tenho uma tabela jogos, que tem os seguintes Campos (id, time1,placar1,placar2,time2,rodada) (ou seja ele mostra quem joga com quem em cada rodada e o placas da partida), o campeonato terão 10 times ou seja 5 partidas por rodada com 9 rosadas, preciso de criar com o php uma maneira de ler quantas vitórias empates e derrotas o time x,y e etc teve para montar a tabela!
       
    • By edionas
      como posso exibir os dados do arquivo
      http://api.tcm.ce.gov.br/sim/1_0/municipios.xml
      em uma tabela?
    • By Carlos Ramos Web
      Olá, pessoal.
      Reabri este tema para quem poder ajudar em criar login em sistema paralelo com a tabela user do wordpress.
      Sei que o wordpress usa o md5 para codificar suas senhas, mas ele usa algo A+ para fazer isso.
      Preciso identificar a codificação certa para criar um login usando os dados da tabela wp_user.
      Só preciso saber com é a criptografia que o wordpress usa em seus senhas.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.