Contato


<?php


include('conexão.php');


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Busque sua origem</title>

<style>
    

    h1{
        text-align: center;
        font-family: "Roboto", sans-serif;
        color: #005844
    }

        tr:nth-child(even) {
background-color: #f2f2f2;
}

tr:hover {
background-color: #ddd;
}

    table {
        width: 85%;
        margin: 0 auto;
        font-family: "Roboto", sans-serif;
        border-collapse: collapse;
        margin-bottom: 20px;
        text-align: center;
        font-weight: 300;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
    }

    table th,
    table td {
        padding: 10px;
        border: 1px solid #005844;
    }

    table th {
        background-color: #005844;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
    }

    table td {
        font-size: 14px;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
    }

    input[type="text"] {
        background-color: #f2f2f2;
        margin-left: 100px;
        border-radius: 7px;
        border-collapse: collapse;
        border: none;
        color: #fff;
        font-size: 16px;
        color: #686868;
        padding: 10px;
        margin-right: 10px;
        width: 200px;
        box-sizing: border-box;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        -webkit-transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out;
        }

        button[type="submit"] {
outline: none;
        background-color: #005844;
        border: none;
        color: #fff;
        font-size: 16px;
        padding: 10px;
        cursor: pointer;
        border-radius: 7px;

        }

    @media screen and (max-width: 600px) {
        table {
            width: 100%;
        }
        table td,
        table th {
            display: block;
            text-align: left;
        }
        table td {
            margin-bottom: 10px;
        }
        

    }
</style> </head><body data-rsssl=1> <h1 style="text-align:center ;" >Busque sua origem </h1> <form action=""> <input name="busca" value="<?php if(isset($_GET['busca'])) echo $_GET ['busca']; ?>" placeholder="faça sua pesquisa" type="text"> <button type="submit">Pesquisar</button> </form> <br> <table width="1000px" border="1"> <id="minha-tabela"> <tr> <th>Sobrenome</th> <th>Nome</th> <th>Pai</th> <th>Mãe</th> <th>Comune</th> <th>Provincia</th> <th>Conjuge</th> <th>Fonte</th> </tr> <?php if(!isset($_GET['busca'])) { ?> <tr> <td colspan="8">Digite algo para Pesquisar...</td> </tr> <?php } else { $pesquisa = $mysqli->real_escape_string ($_GET['busca']); $sql_code = "SELECT * FROM tabeladenomes WHERE sobrenome LIKE '%$pesquisa%'"; $sql_query = $mysqli->query($sql_code) or die("ERRO ao consultar! " . $mysqli->error); if($sql_query->num_rows == 0) { ?> <tr> <td colspan="8">Nenhum resultado encontrado...</td> </tr> <?php } else { while($dados = $sql_query->fetch_assoc()) { ?> <tr> <td><?php echo $dados['sobrenome']; ?></td> <td><?php echo $dados['nome']; ?></td> <td><?php echo $dados['pai']; ?></td> <td><?php echo $dados['mae']; ?></td> <td><?php echo $dados['comune']; ?></td> <td><?php echo $dados['provincia']; ?></td> <td><?php echo $dados['conjuge']; ?></td> <td><?php echo $dados['fonte']; ?></td> <?php } } ?> <?php } ?> </table> <script> {
const rowsPerPage = 10; // número de linhas por página
let currentPage = 1; // página atual, começa na primeira página
const table = document.querySelector('eurogenesis'); // seleciona a tabela
const rows = table.querySelectorAll('tr'); // seleciona todas as linhas da tabela, incluindo o cabeçalho
const totalRows = rows.length - 1; // subtrai 1 para não contar o cabeçalho
const totalPages = Math.ceil(totalRows / rowsPerPage); // calcula o número total de páginas

// mostra apenas as linhas da página atual e esconde as outras
function showRows() {
const start = (currentPage - 1) * rowsPerPage + 1;
const end = start + rowsPerPage - 1;

for (let i = 1; i <= totalRows; i++) {
if (i >= start && i <= end) {
rows[i].style.display = 'table-row';
} else {
rows[i].style.display = 'none';
}
}
}

// adiciona os botões de páginação
function addPagination() {
const paginationContainer = document.createElement('div');
paginationContainer.className = 'pagination';

for (let i = 1; i <= totalPages; i++) {
const button = document.createElement('button');
button.innerText = i;

if (i === currentPage) {
button.className = 'active';
}

button.addEventListener('click', function() {
currentPage = i;
showRows();
updatePagination();
});

paginationContainer.appendChild(button);
}

table.parentNode.insertBefore(paginationContainer, table.nextSibling);
}

// atualiza a classe "active" do botão de páginação da página atual
function updatePagination() {
const buttons = document.querySelectorAll('.pagination button');

buttons.forEach(button => {
if (Number(button.innerText) === currentPage) {
button.className = 'active';
} else {
button.className = '';
}
});
}

// mostra a primeira página e adiciona os botões de páginação
showRows();
addPagination();
}
</script> </body></html>
ou
Registro