2
I’m creating an input for searching my table, but I’m having problems with paging on the page where I search.
Page where I create the table and make the normal pagination:
<div id="resultado">
<h1>Alerta Recebido</h1>
<?php if($num > 0){ ?>
<table class="table table-responsive">
<thead>
<tr>
<th width="20%" style="text-align:center;">De</th>
<th width="60%" style="text-align:center;">Assunto</th>
<th width="10%" style="text-align:center;">Prioridade</th>
<th width="10%" style="text-align:center;">Recebido</th>
</tr>
</thead>
<tr>
<thead>
<?php
do{
if($nomede != $produto["De"]){
?>
<th width="10%" colspan=4>Recebido: <?php echo $produto["Data"]; ?></th>
<?php
$nomede = $produto["De"];
}
?>
</tr>
</thead>
<tbody>
<tr>
<td ><?php echo $produto["De"]; ?></td>
<td class="td-info view_data apagar" id="<?php echo $produto["Id"]; ?>,<?php echo $produto["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $produto["Status"] != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '?>><?php echo $produto["Assunto"]; ?></td>
<td><?php echo $produto["Prioridade"]; ?></td>
<td><?php echo $produto["Hora"]; ?></td>
</tr>
</div>
<?php } while($produto = $result->fetch_assoc()); ?>
<tbody>
</table>
<nav>
<ul class="pagination">
<li>
<a href="./recebidas?pagina=0" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<?php
for($i=0;$i<$num_paginas;$i++){
$estilo = "";
if($pc == $i)
$estilo = "class=\"active\"";
?>
<li <?php echo $estilo; ?> ><a href="./recebidas?pagina=<?php echo $i; ?>"><?php echo $i+1; ?></a></li>
<?php } ?>
<li>
<a href="./recebidas?pagina=<?php echo $num_paginas-1; ?>" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<?php } ?>
</div>
Then I created a form with the search input:
<form action="./busca">
Buscar por: <input type="text" name="campo" id="campo">
</form>
Jquery:
$('#campo').keyup(function(){
$('form').submit(function(){
var dados = $(this).serialize();
$.ajax({
url: './busca',
method: 'post',
dataType: 'html',
data: dados,
success: function(data){
$('#resultado').empty().html(data);
}
});
return false;
});
$('form').trigger('submit');
});
On the page busca I have the code as follows:
$itens_por_pagina1 = 10;
// pegar a pagina atual
$pagina1 = intval($_GET['pagina']);
if(empty($pagina1) && $pagina1 !=0){
$pc1 = "0";
} else {
$pc1 = $pagina1;
}
$inicio1 = $pc1 - 0;
$inicio1 = $inicio1 * $itens_por_pagina1;
$campo = mysqli_real_escape_string($conn, $_POST["campo"]);
$query1 = "SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De like '%$campo%' ORDER BY Recebido Desc LIMIT $inicio1, $itens_por_pagina1";
$result1 = $conn->query($query1) or die($conn->error);
$produto1 = $result1->fetch_assoc();
$num1 = $result1->num_rows;
$num_total1 = $conn->query("SELECT Id, De, Assunto, Conteudo, Prioridade, DATE_FORMAT(Recebido,'%H:%i') AS Hora, DATE(Recebido) AS Data,
Email, Tipo, raddb.Alertas.Para, Status FROM raddb.Alertas LEFT OUTER JOIN raddb.ValAlertas
ON raddb.ValAlertas.IdSMS = raddb.Alertas.Id AND raddb.ValAlertas.Para = raddb.Alertas.Para
WHERE raddb.Alertas.Para = '$colaborador' AND De like '%$campo%'
ORDER BY Recebido Desc")->num_rows;
$num_paginas1 = ceil($num_total1/$itens_por_pagina1);
echo '
<h1>Alerta Recebido</h1>';
if($num1 > 0){ ?>
<table class="table table-responsive">
<thead>
<tr>
<th width="20%" style="text-align:center;">De</th>
<th width="60%" style="text-align:center;">Assunto</th>
<th width="10%" style="text-align:center;">Prioridade</th>
<th width="10%" style="text-align:center;">Recebido</th>
</tr>
</thead>
<tbody>
<tr>
<?php
do{
?>
<td ><?php echo $produto1["De"]; ?></td>
<td class="td-info view_data apagar" id="<?php echo $produto1["Id"]; ?>,<?php echo $produto1["Para"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $produto1["Status"] != '0'?' style="font-weight:bold; font-size: 90%" ':' style="font-weight:normal; font-size: 90%" '?>><?php echo $produto1["Assunto"]; ?></td>
<td><?php echo $produto1["Prioridade"]; ?></td>
<td><?php echo $produto1["Hora"]; ?></td>
</tr>
<?php } while($produto1 = $result1->fetch_assoc()); ?>
<tbody>
</table>
<nav>
<ul class="pagination">
<li>
<a href="./busca?pagina=0" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<?php
for($i=0;$i<$num_paginas1;$i++){
$estilo = "";
if($pc1 == $i)
$estilo = "class=\"active\"";
?>
<li <?php echo $estilo; ?> ><a href="./busca?pagina=<?php echo $i; ?>"><?php echo $i+1; ?></a></li>
<?php } ?>
<li>
<a href="./busca?pagina=<?php echo $num_paginas1-1; ?>" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<?php } ?>
It searches and shows the pagination as shown in the images:
First when I open the page without searching:
Second image, when searching and only fills a page, works well, as shown in the image:
Third image, when I search for something that generates but than a page, at first it works well, as I show:
Fourth image is where the problem arises, in the search I show in the previous image, when I change page (for example page 2) loses the filter (returns the 6 pages as in the first image) and leaves the main page and goes to the page where I do the search, as shown in the image:
But when changing page you should continue to show the search results inside the div, without changing page.
Solve with Session, which could be done dynamically and use a lot less line of code. Functions
keyupandkeydownare also a good call because as soon as you drop or press the keys, you can already pick up the value typed in the field and go searching.– Diéfani Favareto Piovezan
@Diéfani Favareto Piovezan can put an example with Session?
– Bruno
@Diéfani Favareto Piovezan would really appreciate it if you would help me implement what you suggested...I never created a pagination and search system and the way I put it here as a response was the only one that worked
– Bruno
To activate the search while typing just activate the .change() input and then simulate the
clickin the form Ubmit. However, I recommend that you only simulate the click after typing a minimum number of characters, for example 3.– iamdlm
@iamdlm can put an example with change() in the input?
– Bruno
@Bruno I had put in a reply. In the comments does not format code correctly! Take a look!!!
– Diéfani Favareto Piovezan
@Diéfani Favareto Piovezan I saw your answer and I saw the link you put, but I could not implement. I will try again
– Bruno