0
I want the user to search the term and just find that table. However, I can’t get the default view (follow the print):
I want only the search bar and buttons below (except View All).
Follow the page script:
listarprocessos.php
<?php
require_once ('restrito.php')
?>
<?php
require 'conexao.php';
$termo = (isset($_GET['termo'])) ? $_GET['termo'] : '';
if (empty($termo)):
$conexao = conexao::getInstance();
$sql = 'SELECT id, numero, nome, status, setor1, setor2, data1, observ1, setor3, setor4, data2, observ2, setor5, setor6, data3, observ3, setor7, setor8, data4, observ4, setor9, setor10, data5, observ5 FROM processos';
$stm = $conexao->prepare($sql);
$stm->execute();
$clientes = $stm->fetchAll(PDO::FETCH_OBJ);
else:
$conexao = conexao::getInstance();
$sql = 'SELECT id, numero, nome, status, setor1, setor2, data1, observ1, setor3, setor4, data2, observ2, setor5, setor6, data3, observ3, setor7, setor8, data4, observ4, setor9, setor10, data5, observ5 FROM processos WHERE nome LIKE :nome OR numero LIKE :numero';
$stm = $conexao->prepare($sql);
$stm->bindValue(':nome', $termo.'%');
$stm->bindValue(':numero', $termo.'%');
$stm->execute();
$clientes = $stm->fetchAll(PDO::FETCH_OBJ);
endif;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Controle de Processos</title>
<link rel="stylesheet" type="text/css" href="css/xdxd.css">
<link rel="stylesheet" type="text/css" href="css/haha.scss">
<link rel="stylesheet" type="text/css" href="css/xdxd.mas.css">
<link rel="stylesheet" type="text/css" href="css/haha.mas.scss">
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" type="text/css" href="css/tables.css">
<link rel="icon" href="imagens/pref.ico">
<style type="text/css">
body {
background-image: url("./img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
.xdxd {
position: relative;
top: -23px;
left: 110px;
}
.xd {
position: relative;
left: 14px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 15px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: black; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
.botaoProxima {
position: relative;
left: 1350px;
}
.botaoPagina {
position: relative;
margin: 20px 1450px;
}
</style>
</head>
<body>
<fieldset>
<div class="container">
<legend><h1 class="w3-center">Listagem de Processos</h1></legend>
<form action="" method="get" id='form-contato' class="form-horizontal col-md-10">
<label class="col-md-2 w3-text-black control-label" for="termo">Pesquisar</label>
<div class='col-md-7'>
<input type="text" class="form-control" id="termo" name="termo" placeholder="Informe o número ou nome do Processo"> <button type="submit" class="w3-button w3-black w3-right w3-display-right xdxd">Pesquisar</button>
</div><br></br>
<p> <a href='listarprocessos.php' class="w3-button w3-black xd">Ver Todos</a> </p>
<p> <a href='registrarprocesso.php' class="w3-button w3-gray xd">Registrar Processo</a> </p>
<p> <a href='http://localhost/proc/index.php' class="w3-button w3-black xd">Ir para o Site</a> </p>
</form>
<div class='clearfix'></div>
<?php if(!empty($clientes)):?>
<?php foreach($clientes as $cliente):?>
<table style='width:100%'>
<tr>
<th class='w3-text-black'>Número</th>
<td class='w3-text-black'><?=$cliente->numero?></td>
</tr>
<tr>
<th class='w3-text-black'>Nome</th>
<td class='w3-text-black'><?=$cliente->nome?></td>
</tr>
<tr>
<th class='w3-text-black'>Status</th>
<td class='w3-text-black'><?=$cliente->status?></td>
</tr>
<tr>
<th class='w3-text-black'>De</th>
<td class='w3-text-black'><?=$cliente->setor1?></td>
</tr>
<tr>
<th class='w3-text-black'>Para</th>
<td class='w3-text-black'><?=$cliente->setor2?></td>
</tr>
<tr>
<th class='w3-text-black'>Observação de <?=$cliente->setor1?></th>
<td class='w3-text-black'><?=$cliente->observ1?></td>
</tr>
<tr>
<th class='w3-text-black'>Data</th>
<td class='w3-text-black'><?=$cliente->data1?></td>
</tr>
<tr>
<th class='w3-text-black'>De</th>
<td class='w3-text-black'><?=$cliente->setor3?></td>
</tr>
<tr>
<th class='w3-text-black'>Para</th>
<td class='w3-text-black'><?=$cliente->setor4?></td>
</tr>
<tr>
<th class='w3-text-black'>Observação de <?=$cliente->setor3?></th>
<td class='w3-text-black'><?=$cliente->observ2?></td>
</tr>
<tr>
<th class='w3-text-black'>Data</th>
<td class='w3-text-black'><?=$cliente->data2?></td>
</tr>
<tr>
<th class='w3-text-black'>De</th>
<td class='w3-text-black'><?=$cliente->setor5?></td>
</tr>
<tr>
<th class='w3-text-black'>Para</th>
<td class='w3-text-black'><?=$cliente->setor6?></td>
</tr>
<tr>
<th class='w3-text-black'>Observação de <?=$cliente->setor5?></th>
<td class='w3-text-black'><?=$cliente->observ3?></td>
</tr>
<tr>
<th class='w3-text-black'>Data</th>
<td class='w3-text-black'><?=$cliente->data3?></td>
</tr>
<tr>
<th class='w3-text-black'>De</th>
<td class='w3-text-black'><?=$cliente->setor7?></td>
</tr>
<tr>
<th class='w3-text-black'>Para</th>
<td class='w3-text-black'><?=$cliente->setor8?></td>
</tr>
<tr>
<th class='w3-text-black'>Observação de <?=$cliente->setor7?></th>
<td class='w3-text-black'><?=$cliente->observ4?></td>
</tr>
<tr>
<th class='w3-text-black'>Data</th>
<td class='w3-text-black'><?=$cliente->data4?></td>
</tr>
<tr>
<th class='w3-text-black'>De</th>
<td class='w3-text-black'><?=$cliente->setor9?></td>
</tr>
<tr>
<th class='w3-text-black'>Para</th>
<td class='w3-text-black'><?=$cliente->setor10?></td>
</tr>
<tr>
<th class='w3-text-black'>Observação de <?=$cliente->setor9?></th>
<td class='w3-text-black'><?=$cliente->observ5?></td>
</tr>
<tr>
<th class='w3-text-black'>Data</th>
<td class='w3-text-black'><?=$cliente->data5?></td>
</tr>
<tr>
<th class='w3-text-black'>Ações</th>
<td><a href='editar.php?id=<?=$cliente->id?>' class="w3-button w3-black">Editar</a> <a href="excluir.php?id=<?=$cliente->id?>" title="Excluir o registro" class="w3-button w3-red" >Excluir</a></td>
</tr>
<BR></BR>
<BR></BR>
<tbody>
<?php endforeach;?>
</tbody>
</table>
<?php else: ?>
<h3 class="text-center text-primary">Não existem processos registrados!</h3>
<?php endif; ?>
</fieldset>
</div>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>
Good morning @Bernardo Rodel you can work with : https://datatables.net/manual/styling/bootstrap<br />
 <br />This is plugin for jQuery and provides several interaction controls with HTML tables.
– Elton Silva