| |
| <?php
|
| function afficher_table_custom_paginee_direct() {
|
| global $wpdb;
|
|
|
|
|
| ini_set('memory_limit', '256M');
|
|
|
| $lignes_par_page = 25;
|
| $page = isset($_POST['page_num']) ? intval($_POST['page_num']) : 1;
|
| $offset = ($page - 1) * $lignes_par_page;
|
|
|
| $recherche = isset($_POST['search']) ? trim($_POST['search']) : '';
|
| $manufacturier_filtre = isset($_POST['manufacturier']) ? trim($_POST['manufacturier']) : '';
|
| $marque_filtre = isset($_POST['marque']) ? trim($_POST['marque']) : '';
|
| $grade_filtre = isset($_POST['grade']) ? trim($_POST['grade']) : '';
|
|
|
|
|
| $colonnes = "id, Manufacturier, Marque, Grade, `Type de produit`, `Description detaillee`,
|
| Forme, `Densité`, `Description chimique`, `Melt Mass Flow Rate`,
|
| `Notched Izod Impact`, `Tensile Strength`, `Flex Strength`, `Flex Mod`,
|
| `Rockwell R`, `DTUL 264 PSI`, `DTUL 66PSI`";
|
|
|
| $where_clauses = [];
|
| if (!empty($recherche)) {
|
| $where_clauses[] = $wpdb->prepare(
|
| "(Manufacturier LIKE %s OR Marque LIKE %s OR Grade LIKE %s)",
|
| '%' . $wpdb->esc_like($recherche) . '%',
|
| '%' . $wpdb->esc_like($recherche) . '%',
|
| '%' . $wpdb->esc_like($recherche) . '%'
|
| );
|
| }
|
| if (!empty($manufacturier_filtre)) {
|
| $where_clauses[] = $wpdb->prepare("Manufacturier = %s", $manufacturier_filtre);
|
| }
|
| if (!empty($marque_filtre)) {
|
| $where_clauses[] = $wpdb->prepare("Marque = %s", $marque_filtre);
|
| }
|
| if (!empty($grade_filtre)) {
|
| $where_clauses[] = $wpdb->prepare("Grade = %s", $grade_filtre);
|
| }
|
|
|
| $where_clause = empty($where_clauses) ? '' : 'WHERE ' . implode(' AND ', $where_clauses);
|
|
|
|
|
| $total_query = "SELECT COUNT(id) FROM mat $where_clause";
|
| $total_items = $wpdb->get_var($total_query);
|
| $total_pages = ceil($total_items / $lignes_par_page);
|
|
|
|
|
| $sql = "SELECT $colonnes FROM mat $where_clause LIMIT %d OFFSET %d";
|
| $resultats = $wpdb->get_results($wpdb->prepare($sql, $lignes_par_page, $offset));
|
|
|
| if ($resultats && count($resultats) > 0) {
|
|
|
| echo '<style>
|
| /* Styles des filtres */
|
| .filter-container {
|
| background: white;
|
| padding: 20px;
|
| border-radius: 8px;
|
| box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
| margin-bottom: 20px;
|
| }
|
|
|
| .filter-row {
|
| display: flex;
|
| flex-wrap: nowrap;
|
| gap: 10px;
|
| align-items: center;
|
| }
|
|
|
| .filter-item {
|
| flex: 1;
|
| min-width: 150px;
|
| }
|
|
|
| .filter-buttons {
|
| display: flex;
|
| gap: 10px;
|
| white-space: nowrap;
|
| }
|
|
|
| .search-input {
|
| width: 100%;
|
| padding: 8px 12px;
|
| border: 1px solid #ddd;
|
| border-radius: 4px;
|
| font-size: 14px;
|
| }
|
|
|
| .filter-select {
|
| width: 100%;
|
| padding: 8px 12px;
|
| border: 1px solid #ddd;
|
| border-radius: 4px;
|
| background-color: white;
|
| font-size: 14px;
|
| }
|
|
|
| .filter-button {
|
| padding: 8px 16px;
|
| background: #4CAF50;
|
| color: white;
|
| border: none;
|
| border-radius: 4px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| white-space: nowrap;
|
| }
|
|
|
| .reset-button {
|
| background: #f44336;
|
| }
|
|
|
| .filter-button:hover {
|
| opacity: 0.9;
|
| }
|
|
|
| /* Table styles */
|
| .table-container {
|
| margin: 20px 0;
|
| border: 1px solid #ddd;
|
| border-radius: 8px;
|
| box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
| }
|
|
|
| .table-scroll {
|
| overflow-x: auto;
|
| max-height: 70vh;
|
| }
|
|
|
| table {
|
| border-collapse: collapse;
|
| width: 100%;
|
| font-size: 13px;
|
| background: white;
|
| table-layout: fixed;
|
| }
|
|
|
| th, td {
|
| padding: 12px;
|
| text-align: left;
|
| border: 1px solid #ddd;
|
| white-space: nowrap;
|
| overflow: hidden;
|
| text-overflow: ellipsis;
|
| }
|
|
|
| th {
|
| background: #4CAF50;
|
| color: white;
|
| font-weight: 600;
|
| position: sticky;
|
| top: 0;
|
| z-index: 1;
|
| }
|
|
|
| tr:nth-child(even) {
|
| background: #f8f8f8;
|
| }
|
|
|
| tr:hover {
|
| background: #f0f8f0;
|
| }
|
|
|
| /* Fixed column widths */
|
| .col-id { width: 60px; }
|
| .col-manufacturer { width: 120px; }
|
| .col-brand { width: 120px; }
|
| .col-grade { width: 120px; }
|
| .col-type { width: 120px; }
|
| .col-description { width: 200px; }
|
| .col-form { width: 100px; }
|
| .col-density { width: 100px; }
|
| .col-chemical { width: 150px; }
|
| .col-melt { width: 120px; }
|
| .col-izod { width: 120px; }
|
| .col-tensile { width: 120px; }
|
| .col-flex { width: 120px; }
|
| .col-flexmod { width: 120px; }
|
| .col-rockwell { width: 120px; }
|
| .col-dtul264 { width: 120px; }
|
| .col-dtul66 { width: 120px; }
|
|
|
| /* Clickable cell styles */
|
| .clickable {
|
| cursor: pointer;
|
| position: relative;
|
| }
|
|
|
| .clickable:hover {
|
| background-color: #f0f8f0 !important;
|
| }
|
|
|
| .clickable::after {
|
| content: "🔍";
|
| position: absolute;
|
| top: 2px;
|
| right: 2px;
|
| font-size: 10px;
|
| opacity: 0.5;
|
| }
|
|
|
| /* Modal styles */
|
| .modal {
|
| display: none;
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background-color: rgba(0, 0, 0, 0.5);
|
| z-index: 9999;
|
| }
|
|
|
| .modal-content {
|
| position: relative;
|
| background-color: #fefefe;
|
| margin: 15% auto;
|
| padding: 20px;
|
| width: 80%;
|
| max-width: 600px;
|
| border-radius: 8px;
|
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .modal-close {
|
| position: absolute;
|
| top: 10px;
|
| right: 10px;
|
| font-size: 20px;
|
| font-weight: bold;
|
| cursor: pointer;
|
| color: #666;
|
| padding: 5px 10px;
|
| border-radius: 4px;
|
| }
|
|
|
| .modal-header {
|
| margin-bottom: 10px;
|
| padding-bottom: 10px;
|
| border-bottom: 1px solid #eee;
|
| font-weight: bold;
|
| color: #333;
|
| }
|
|
|
| .modal-body {
|
| max-height: 60vh;
|
| overflow-y: auto;
|
| padding: 10px 0;
|
| line-height: 1.5;
|
| color: #444;
|
| }
|
|
|
| /* Pagination styles */
|
| .pagination {
|
| margin-top: 20px;
|
| text-align: center;
|
| padding: 10px;
|
| }
|
|
|
| .pagination button {
|
| margin: 0 2px;
|
| padding: 8px 12px;
|
| background: #4CAF50;
|
| color: white;
|
| border: none;
|
| border-radius: 4px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| min-width: 40px;
|
| }
|
|
|
| .pagination button.active {
|
| background-color: #367c39;
|
| font-weight: bold;
|
| }
|
|
|
| /* Responsive design */
|
| @media screen and (max-width: 768px) {
|
| .filter-row {
|
| flex-wrap: wrap;
|
| }
|
|
|
| .filter-item {
|
| flex: 1 1 100%;
|
| }
|
|
|
| .filter-buttons {
|
| width: 100%;
|
| justify-content: center;
|
| margin-top: 10px;
|
| }
|
| }
|
| </style>';
|
|
|
|
|
| echo '<script>
|
| document.addEventListener("DOMContentLoaded", function() {
|
| // Modal
|
| const modal = document.getElementById("textModal");
|
| const modalHeader = modal.querySelector(".modal-header");
|
| const modalBody = modal.querySelector(".modal-body");
|
| const closeBtn = modal.querySelector(".modal-close");
|
|
|
| function openModal(header, content) {
|
| modalHeader.textContent = header;
|
| modalBody.textContent = content;
|
| modal.style.display = "block";
|
| }
|
|
|
| closeBtn.onclick = function() {
|
| modal.style.display = "none";
|
| }
|
|
|
| window.onclick = function(event) {
|
| if (event.target == modal) {
|
| modal.style.display = "none";
|
| }
|
| }
|
|
|
| document.addEventListener("keydown", function(event) {
|
| if (event.key === "Escape") {
|
| modal.style.display = "none";
|
| }
|
| });
|
|
|
| document.querySelectorAll(".clickable").forEach(cell => {
|
| cell.addEventListener("click", function() {
|
| const header = this.getAttribute("data-header");
|
| const content = this.getAttribute("data-content");
|
| openModal(header, content);
|
| });
|
| });
|
| });
|
|
|
| // Fonction de réinitialisation des filtres
|
| function resetFilters() {
|
| document.querySelector("input[name=\'search\']").value = "";
|
| document.querySelectorAll(".filter-select").forEach(select => {
|
| select.selectedIndex = 0;
|
| });
|
| document.querySelector(".filter-container form").submit();
|
| }
|
| </script>';
|
|
|
|
|
| echo '<div id="textModal" class="modal">
|
| <div class="modal-content">
|
| <span class="modal-close">×</span>
|
| <div class="modal-header"></div>
|
| <div class="modal-body"></div>
|
| </div>
|
| </div>';
|
|
|
|
|
| echo '<div class="filter-container">';
|
| echo '<form method="POST" action="">';
|
| echo '<div class="filter-row">';
|
|
|
|
|
| echo '<div class="filter-item">';
|
| echo '<input type="text" name="search" value="' . esc_attr($recherche) . '" placeholder="Rechercher..." class="search-input">';
|
| echo '</div>';
|
|
|
|
|
| echo '<div class="filter-item">';
|
| echo '<select name="manufacturier" class="filter-select">';
|
| echo '<option value="">Tous les manufacturiers</option>';
|
| $manufacturiers = $wpdb->get_col("SELECT DISTINCT Manufacturier FROM mat WHERE Manufacturier IS NOT NULL AND Manufacturier != ''");
|
| foreach ($manufacturiers as $manufacturier) {
|
| $selected = ($manufacturier == $manufacturier_filtre) ? ' selected' : '';
|
| echo '<option value="' . esc_attr($manufacturier) . '"' . $selected . '>' . esc_html($manufacturier) . '</option>';
|
| }
|
| echo '</select>';
|
| echo '</div>';
|
|
|
|
|
| echo '<div class="filter-item">';
|
| echo '<select name="marque" class="filter-select">';
|
| echo '<option value="">Toutes les marques</option>';
|
| $marques = $wpdb->get_col("SELECT DISTINCT Marque FROM mat WHERE Marque IS NOT NULL AND Marque != ''");
|
| foreach ($marques as $marque) {
|
| $selected = ($marque == $marque_filtre) ? ' selected' : '';
|
| echo '<option value="' . esc_attr($marque) . '"' . $selected . '>' . esc_html($marque) . '</option>';
|
| }
|
| echo '</select>';
|
| echo '</div>';
|
|
|
|
|
| echo '<div class="filter-item">';
|
| echo '<select name="grade" class="filter-select">';
|
| echo '<option value="">Tous les grades</option>';
|
| $grades = $wpdb->get_col("SELECT DISTINCT Grade FROM mat WHERE Grade IS NOT NULL AND Grade != ''");
|
| foreach ($grades as $grade) {
|
| $selected = ($grade == $grade_filtre) ? ' selected' : '';
|
| echo '<option value="' . esc_attr($grade) . '"' . $selected . '>' . esc_html($grade) . '</option>';
|
| }
|
| echo '</select>';
|
| echo '</div>';
|
|
|
|
|
| echo '<div class="filter-buttons">';
|
| echo '<button type="submit" class="filter-button">Filtrer</button>';
|
| echo '<button type="button" onclick="resetFilters()" class="filter-button reset-button">Réinitialiser</button>';
|
| echo '</div>';
|
|
|
| echo '</div>';
|
| echo '</form>';
|
| echo '</div>';
|
|
|
|
|
| echo '<div class="table-container">';
|
| echo '<div class="table-scroll">';
|
| echo '<table>';
|
|
|
|
|
| echo '<thead><tr>';
|
| echo '<th class="col-id">ID</th>';
|
| echo '<th class="col-manufacturer">Manufacturier</th>';
|
| echo '<th class="col-brand">Marque</th>';
|
| echo '<th class="col-grade">Grade</th>';
|
| echo '<th class="col-type">Type de produit</th>';
|
| echo '<th class="col-description">Description detaillee</th>';
|
| echo '<th class="col-form">Forme</th>';
|
| echo '<th class="col-density">Densité</th>';
|
| echo '<th class="col-chemical">Description chimique</th>';
|
| echo '<th class="col-melt">Melt Flow</th>';
|
| echo '<th class="col-izod">Izod Impact</th>';
|
| echo '<th class="col-tensile">Tensile</th>';
|
| echo '<th class="col-flex">Flex Str.</th>';
|
| echo '<th class="col-flexmod">Flex Mod</th>';
|
| echo '<th class="col-rockwell">Rockwell</th>';
|
| echo '<th class="col-dtul264">DTUL 264</th>';
|
| echo '<th class="col-dtul66">DTUL 66</th>';
|
| echo '</tr></thead>';
|
|
|
|
|
| echo '<tbody>';
|
| foreach ($resultats as $ligne) {
|
| echo '<tr>';
|
| echo '<td>' . htmlspecialchars($ligne->id) . '</td>';
|
| echo '<td class="clickable" data-header="Manufacturier" data-content="' . esc_attr($ligne->Manufacturier) . '">' .
|
| htmlspecialchars($ligne->Manufacturier) . '</td>';
|
| echo '<td class="clickable" data-header="Marque" data-content="' . esc_attr($ligne->Marque) . '">' .
|
| htmlspecialchars($ligne->Marque) . '</td>';
|
| echo '<td class="clickable" data-header="Grade" data-content="' . esc_attr($ligne->Grade) . '">' .
|
| htmlspecialchars($ligne->Grade) . '</td>';
|
| echo '<td class="clickable" data-header="Type de produit" data-content="' . esc_attr($ligne->{'Type de produit'}) . '">' .
|
| htmlspecialchars($ligne->{'Type de produit'}) . '</td>';
|
| echo '<td class="clickable" data-header="Description détaillée" data-content="' . esc_attr($ligne->{'Description detaillee'}) . '">' .
|
| htmlspecialchars($ligne->{'Description detaillee'}) . '</td>';
|
| echo '<td class="clickable" data-header="Forme" data-content="' . esc_attr($ligne->Forme) . '">' .
|
| htmlspecialchars($ligne->Forme) . '</td>';
|
| echo '<td class="clickable" data-header="Densité" data-content="' . esc_attr($ligne->{'Densité'}) . '">' .
|
| htmlspecialchars($ligne->{'Densité'}) . '</td>';
|
| echo '<td class="clickable" data-header="Description chimique" data-content="' . esc_attr($ligne->{'Description chimique'}) . '">' .
|
| htmlspecialchars($ligne->{'Description chimique'}) . '</td>';
|
| echo '<td class="clickable" data-header="Melt Mass Flow Rate" data-content="' . esc_attr($ligne->{'Melt Mass Flow Rate'}) . '">' .
|
| htmlspecialchars($ligne->{'Melt Mass Flow Rate'}) . '</td>';
|
| echo '<td class="clickable" data-header="Notched Izod Impact" data-content="' . esc_attr($ligne->{'Notched Izod Impact'}) . '">' .
|
| htmlspecialchars($ligne->{'Notched Izod Impact'}) . '</td>';
|
| echo '<td class="clickable" data-header="Tensile Strength" data-content="' . esc_attr($ligne->{'Tensile Strength'}) . '">' .
|
| htmlspecialchars($ligne->{'Tensile Strength'}) . '</td>';
|
| echo '<td class="clickable" data-header="Flex Strength" data-content="' . esc_attr($ligne->{'Flex Strength'}) . '">' .
|
| htmlspecialchars($ligne->{'Flex Strength'}) . '</td>';
|
| echo '<td class="clickable" data-header="Flex Mod" data-content="' . esc_attr($ligne->{'Flex Mod'}) . '">' .
|
| htmlspecialchars($ligne->{'Flex Mod'}) . '</td>';
|
| echo '<td class="clickable" data-header="Rockwell R" data-content="' . esc_attr($ligne->{'Rockwell R'}) . '">' .
|
| htmlspecialchars($ligne->{'Rockwell R'}) . '</td>';
|
| echo '<td class="clickable" data-header="DTUL 264 PSI" data-content="' . esc_attr($ligne->{'DTUL 264 PSI'}) . '">' .
|
| htmlspecialchars($ligne->{'DTUL 264 PSI'}) . '</td>';
|
| echo '<td class="clickable" data-header="DTUL 66PSI" data-content="' . esc_attr($ligne->{'DTUL 66PSI'}) . '">' .
|
| htmlspecialchars($ligne->{'DTUL 66PSI'}) . '</td>';
|
| echo '</tr>';
|
| }
|
| echo '</tbody>';
|
| echo '</table>';
|
| echo '</div>';
|
| echo '</div>';
|
|
|
|
|
| $range = 5;
|
| echo '<div class="pagination">';
|
| echo '<form method="POST" action="" style="display: inline-block;">';
|
|
|
|
|
| if ($page > 1) {
|
| echo '<button type="submit" name="page_num" value="1" class="filter-button">Premier</button>';
|
| echo '<button type="submit" name="page_num" value="' . ($page - 1) . '" class="filter-button">Précédent</button>';
|
| }
|
|
|
|
|
| for ($i = max(1, $page - $range); $i <= min($total_pages, $page + $range); $i++) {
|
| if ($i == $page) {
|
| echo '<button type="submit" name="page_num" value="' . $i . '" class="filter-button active">' . $i . '</button>';
|
| } else {
|
| echo '<button type="submit" name="page_num" value="' . $i . '" class="filter-button">' . $i . '</button>';
|
| }
|
| }
|
|
|
|
|
| if ($page < $total_pages) {
|
| echo '<button type="submit" name="page_num" value="' . ($page + 1) . '" class="filter-button">Suivant</button>';
|
| echo '<button type="submit" name="page_num" value="' . $total_pages . '" class="filter-button">Dernier</button>';
|
| }
|
|
|
|
|
| echo '<span style="margin-left: 15px; color: #666;">Page ' . $page . ' sur ' . $total_pages . '</span>';
|
|
|
| echo '</form>';
|
| echo '</div>';
|
|
|
| } else {
|
| echo '<div style="text-align: center; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">Aucune donnée trouvée.</div>';
|
| }
|
| }
|
|
|
| afficher_table_custom_paginee_direct();
|
| ?>
|
| |
| |
Comments