Get total record found during a search

Asked

Viewed 48 times

-2

I am developing an HTML page that contains a table and a search ground. The table is filtered while the user type. So far so good. But I would like to see the total of records returned by the search. type like: "We found x items". I need this number to change according to the typing in the search field. CTRL+F does exactly what I need. it does that count. tried with Javascript but could not. 

$('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>

javascript

  • Here is already a way: var total = $('table#tabela tbody tr:visible').length;

  • thanks even Noobsaibot. it worked bro! Thanks really guy

1 answer

0


According to the plugin documentation, you can use the callback onAfter to count how many lines are visible in the table when typing something in the search field.

To count the visible lines, use the code suggested by the friend @Noobsaibot:

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

But you need to create an element with a id you will receive this information. Instead of foram encontrados "x" itens., put a span with a id:

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

And in the callback of onAfter you count the visible lines and play the text with the result within that span, you can even adjust the text in singular or plural, depending on the number of the result:

$('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>

  • It worked Sam. Thanks. Thanks for the help. That’s all we needed to close the system. "a priori" kkk

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.