Ocultar linhas de uma tabela

[Lúcio Marques 1]

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á.

[lvsis 0]

Poste o código da sua tabela

[Lúcio Marques 1]

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>

 

[lvsis 0]

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" />

 

[Lúcio Marques 1]

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á

[lvsis 0]

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" />