-2

Estou desenvolvendo uma página HTML que contem uma tabela e um campo de busca. A tabela é filtrada enquanto o usuário digita.Ate ai tudo bem. Mas Gostaria que fosse exibido o total de registros retornados pela busca. tipo assim: "Foram encontrados x itens". preciso que esse numero mude conforme a digitação no campo de busca. o CTRL+F faz exatamente o que eu preciso. ele faz essa contagem. tentei com Javascript mas não consegui.

$('input#txt_consulta').quicksearch('table#tabela tbody tr');
<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title>teste</title>
</head>
<body>
	<div class="form-group input-group">
 <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
 <input name="consulta"  id="txt_consulta" placeholder="Consultar" type="text" class="form-control">
 <br>
 foram encontrados "x"  itens.
</div>
	<table id="tabela" class="table table-hover">
		<thead>
			<th>Time</th>
			<th>País</th>
			<th>Capital</th>
			<th>Torneio</th>
			
		</thead>
		<tbody>
			<tr>
				<td>Liverpool</td>
				<td>Inglaterra</td>
				<td>Londres</td>
				<td>Premier League</td>	
			</tr>

			<tr>
				<td>Chelsea</td>
				<td>Inglaterra</td>
				<td>Londres</td>
				<td>Premier League</td>	
			</tr>

			<tr>
				<td>Manchester City</td>
				<td>Inglaterra</td>
				<td>Londres</td>
				<td>Premier League</td>	
			</tr>
			
			
		</tbody>
	</table>

</body>
</html>

2
  • Aqui já é um caminho: var total = $('table#tabela tbody tr:visible').length;
    – NoobSaibot
    18/11/2019 às 7:18
  • valeu mesmo NoobSaibot. funcionou mano! Obrigado mesmo cara 19/11/2019 às 18:26

1 Resposta 1

0

Segundo a documentação do plugin, você pode usar o callback onAfter para contar quantas linhas estão visíveis na tabela quando digitar algo no campo de busca.

Para contar as linhas visíveis, use o código sugerido pelo amigo @NoobSaibot:

$('table#tabela tbody tr:visible').length;

Mas é preciso criar um elemento com um id que irá receber essa informação. No lugar de foram encontrados "x" itens., coloque um span com um id:

<span id="num_res"></span>

E no callback do onAfter você conta as linhas visíveis e joga o texto com o resultado dentro dessa span, podendo até ajustar o texto no singular ou plural, dependendo do número do resultado:

$('input#txt_consulta').quicksearch('table#tabela tbody tr', {
   'onAfter': function () {
      var total = $('table#tabela tbody tr:visible').length;
      if(total == 0){
         var txt_res = "Nenhum item encontrado.";
      }else if(total < 2){
         var txt_res = 'Foi encontrado "'+ total +'" item.';
      }else{
         var txt_res = 'Foram encontrados "'+ total +'" itens.';
      }
      $("#num_res").text(txt_res);
   }
});
<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title>teste</title>
</head>
<body>
	<div class="form-group input-group">
 <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
 <input name="consulta"  id="txt_consulta" placeholder="Consultar" type="text" class="form-control">
 <br>
 <span id="num_res"></span>
</div>
	<table id="tabela" class="table table-hover">
		<thead>
			<th>Time</th>
			<th>País</th>
			<th>Capital</th>
			<th>Torneio</th>
			
		</thead>
		<tbody>
			<tr>
				<td>Liverpool</td>
				<td>Inglaterra</td>
				<td>Londres</td>
				<td>Premier League</td>	
			</tr>

			<tr>
				<td>Chelsea</td>
				<td>Inglaterra</td>
				<td>Londres</td>
				<td>Premier League</td>	
			</tr>

			<tr>
				<td>Manchester City</td>
				<td>Inglaterra</td>
				<td>Londres</td>
				<td>Premier League</td>	
			</tr>
			
			
		</tbody>
	</table>

</body>
</html>

1
  • funcionou Sam. obrigado. valeu pela ajuda. Só faltava isso pra fechar o sistema. "a priori" kkk 19/11/2019 às 18:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .