Tabella con ricerca dinamica

Creo un tabella con ricerca dinamica e possibilità di scegliere e ordinare le colonne da visualizzare.

Molto comoda quando si ha una tabella con molti campi.

Per questo esempio userò la solita tabella comuni.

Includo le librerie jquery

<script src="/js/jquery-3.7.1.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>

Il form e il div dove mostrare i risultati

<div class="container">
    <div id="wait" class="hide"></div>
    <form id="form">
        <input type="text" name="ricerca" onkeyup="showTable()" placeholder="ricerca"/>
        <input type="hidden" name="pagina" value="1"/>
        <input type="hidden" name="ordinacolonna" value=""/>
        <input type="hidden" name="sortby" value="asc"/>
        <input type="number" step="5" onchange="showTable()" id="risultati" name="risultati" value="5"/>
        <input type="button" class="buts" value="Colonne" onclick="mostraCampi()"/>
        <div class="hide" id="choose-fields">
            <ul id="sortable">
                <?php
                $default = array("Comune", "Provincia", "Regione");
                $dirname = str_replace("/web/htdocs/www.criric.it/home", "", dirname(__FILE__));
                require 'config.php';
                include 'classe.php';
                $Comuni = new Comuni();
                $fields = $Comuni->showFields("comuni");
                $column = array_column($fields, "Field");
                foreach ($column as $value) {
                    $checked = in_array($value, $default) ? "checked" : "";
                    ?>
                    <li class="ui-state-default">
                        <label>
                            <input <?php echo $checked; ?> type="checkbox" name="fields[]" value="<?php echo $value; ?>" /> <?php echo $value; ?>
                        </label>
                    </li>                             
                    <?php
                }
                ?>
            </ul>
            <p>Seleziona e ordina i campi che vuoi vedere in tahella</p>
        </div>
    </form>
    <div id="showtable"></div>
</div>

Le funzioni Javascript

<script>
    $(document).ready(function () {
        showTable();
        $("#sortable").sortable({
            update: function (event, ui) {
                showTable();
            }
        });
        $("#sortable").disableSelection();
        $("#sortable input[type=checkbox]").change(function () {
            showTable();
        });
    });

    function showTable() {
        wait();
        $.ajax({
            type: "POST",
            url: "<?php echo $dirname; ?>/table.php",
            data: $("#form").serialize(),
            success: function (response) {
                $("#showtable").html(response);
                wait();
            }
        });
    }
    function updateTable(p) {
        $("input[name='pagina']").val(p);
        showTable();
    }
    function mostraCampi() {
        $("#choose-fields").toggleClass("hide");
    }
    function wait() {
        $("#wait").toggleClass("hide");
    }
    function ordinacolonna(order) {
        $("input[name='ordinacolonna']").val(order);
        $("input[name='sortby']").val($("input[name='sortby']").val() === "desc" ? "asc" : "desc");
        showTable();
    }
</script>

Css a piacere

<style>
    div#wait {
        width: 100%;
        height: calc(100%);
        background-color: black;
        z-index: 21;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0.1;
        background-image: url("/images/loading5.gif");
        background-position: center;
        background-repeat: no-repeat;
    }
    .hide {
        display: none;
    }
    .pagination ul {
        display: inline-block;
    }
    .pagination ul li {
        display: inline;
    }
    li {
        line-height: 20px;
    }

    ul#sortable {
        list-style-type: none;
        margin:0;
        padding: 0;
    }
    ul#sortable li{
        float:left;
        width: 20%;
        margin:4px;
    }
    .container {
        width: 50%;
        margin:auto;
    }
</style>

config.php per i paramentri di connessione

<?php

define("DB_HOST", "localhost");
define("DB_USER", "root");
define("DB_PSWD", "");
define("DB_NAME", "database");

La classe php :: da sistemare il ciclo sulla ricerca e anche la funzione pagination() fa un pò cagare

<?php

class Comuni {

    private static $sql = null;

    public function __construct() {
        
    }

    public function __destruct() {
        self::closeConnection();
    }

    private static function closeConnection() {
        if (self::$sql != null) {
            self::$sql->close();
            self::$sql = null;
        }
    }

    private static function getConnection() {
        if (self::$sql == null) {
            self::$sql = new mysqli(DB_HOST, DB_USER, DB_PSWD, DB_NAME);
        }
        return self::$sql;
    }

    public function cercaComuni($terms) {
        $sql = self::getConnection();
        $query = "SELECT * FROM comuni WHERE 1 ";
        $order = "Comune DESC";
        if (isset($terms['order']) && !empty($terms['order'])) {
            $order = $terms['order'];
        }
        if (isset($terms['ordinecolonna']) && !empty($terms['ordinecolonna'])) {
            $order = $sql->real_escape_string($terms['ordinecolonna']) . " " . $sql->real_escape_string($terms['sortby']);
        }
        if (isset($terms['ricerca']) && !empty($terms['ricerca'])) {
            $parts = explode(' ', $terms['ricerca']);
            for ($i = 0; $i < count($parts); $i++) {
                $query .= "&& ("
                        . "Comune LIKE '%" . $sql->real_escape_string($parts[$i]) . "%' || "
                        . "Regione LIKE '%" . $sql->real_escape_string($parts[$i]) . "%'"
                        . ") ";
            }
        }
        $query .= " ORDER BY " . $order . " ";

        if (isset($terms['limit']) && !empty($terms['limit'])) {
            $query .= " LIMIT " . $terms['limit'] . " ";
        }
//        echo $query;
        $result = $sql->query($query);
        if (!$result) {
            return false;
        }
        $return = array();
        while ($row = $result->fetch_assoc()) {
            $return[] = $row;
        }
        return $return;
    }

    public function showFields($table) {
        $sql = self::getConnection();
        $query = "SHOW COLUMNS FROM $table";
        $result = $sql->query($query);
        $return = array();
        while ($row = $result->fetch_assoc()) {
            $return[] = $row;
        }
        return $return;
    }

    public function pagination($total_pages, $current_page, $current_records, $total_records) {
        ?>
        <div class="pagination">
            <ul>
                <?php
                if ($total_pages > 0) {

                    $k = (($current_page + 2 > $total_pages) ? $total_pages - 2 : (($total_pages - 2 < 1) ? 3 : $current_page));

                    echo "<li class='nopointer'><a href='javascript:void(0)'>pagina $current_page di $total_pages</a></li>";
                    if ($current_page >= 2) {
                        echo "<li><a href='javascript:updateTable(1)'> << </a></li>";
                        echo "<li><a href='javascript:updateTable(" . ($current_page - 1) . ")'> < </a></li>";
                    } else {
                        echo "<li class='disabled'><a href='javascript:void(0)'> << </a></li>";
                        echo "<li class='disabled'><a disabled href='javascript:void(0)'> < </a></li>";
                    }
                    for ($i = -2; $i <= 2; $i++) {
                        if ($k + $i > 0) {
                            if ($k + $i == $current_page)
                                echo "<li class='active'><a href='javascript:updateTable(" . ($k + $i) . ")'>" . ($k + $i) . "</a></li>";
                            else
                                echo "<li><a href='javascript:updateTable(" . ($k + $i) . ")'>" . ($k + $i) . "</a></li>";
                        }
                    };

                    if ($current_page < $total_pages) {
                        echo "<li><a href='javascript:updateTable(" . ($current_page + 1) . ")'> > </a></li>";
                        echo "<li><a href='javascript:updateTable(" . $total_pages . ")'> >> </a></li>";
                    } else {
                        echo "<li class='disabled'><a href='javascript:void(0)'> > </a></li>";
                        echo "<li class='disabled'><a disabled href='javascript:void(0)'> >> </a></li>";
                    }
                }
                ?>
            </ul>

        </div>
        <?php
    }
}

Il file table.php che genera la tabella

<?php
$isAjax = isset($_SERVER['HTTP_SEC_FETCH_SITE']) && strtolower($_SERVER['HTTP_SEC_FETCH_SITE']) === 'same-origin';
if (!$isAjax) {
    die('Access denied');
}
// mostra eventuali errori php, si puo togliere in produzione
ini_set('error_reporting', E_ALL);
ini_set('display_errors', true);

require 'config.php';
include 'classe.php';
$Comuni = new Comuni();

$pagina = isset($_REQUEST['pagina']) && !empty($_REQUEST['pagina']) && (int) $_REQUEST['pagina'] > 0 ? (int) $_REQUEST['pagina'] : 1;
$risultati = isset($_REQUEST['risultati']) && !empty($_REQUEST['risultati']) && (int) $_REQUEST['risultati'] > 0 ? (int) $_REQUEST['risultati'] : 5;
$order = isset($_REQUEST['order']) && !empty($_REQUEST['order']) && (int) $_REQUEST['order'] > 0 ? (int) $_REQUEST['order'] : false;
$ordinecolonna = isset($_REQUEST['ordinacolonna']) && !empty($_REQUEST['ordinacolonna']) ? $_REQUEST['ordinacolonna'] : "Comune";
$sortby = isset($_REQUEST['sortby']) && !empty($_REQUEST['sortby']) ? $_REQUEST['sortby'] : "desc";
$l = $risultati * $pagina - $risultati;
$limit = "$l,$risultati";
$ricerca = isset($_REQUEST['ricerca']) && !empty($_REQUEST['ricerca']) ? $_REQUEST['ricerca'] : false;

$terms = array(
    "ricerca" => $ricerca,
    "order" => $order,
    "ordinecolonna" => $ordinecolonna,
    "sortby" => $sortby,
);
//var_dump($terms);
$n = count($Comuni->cercaComuni($terms));
$t = ceil($n / $risultati);

if ($pagina > $t) {
    $pagina = abs($t - 1);
}
$terms['limit'] = $limit;
$comuni = $Comuni->cercaComuni($terms);
$conta = count($comuni);

//var_dump($_REQUEST['fields']);
if (!isset($_REQUEST['fields'])) {
    die("<p>non hai selezionato colonne</p>");
}
?>
<p class="report_tabella">
    <?php
    echo "Pagina <b>$pagina</b> mostra <b>" . $risultati . "</b> risultati su <b>" . $n . "</b> trovati";
    ?>
</p>
<table class="notes">
    <thead>
        <?php
        foreach ($_REQUEST['fields'] as $field) {
            if ($ordinecolonna == $field) {
                echo "<th onclick='ordinacolonna(\"$field\")'><span class='order-th'><i class='fa fa-sort-amount-$sortby'></i> $field</span></th>";
            } else {
                echo "<th onclick='ordinacolonna(\"$field\")'><span class='order-th'>$field</span></th>";
            }
        }
        ?>

    </thead>
    <?php
    foreach ($comuni as $comune) {
        echo "<tr>";
        foreach ($_REQUEST['fields'] as $field) {
            echo "<td>" . utf8_encode($comune[$field]) . "</td>";
        }
        echo "</tr>";
    }
    if (count($comuni) == 0) {
        echo "<tr><td colspan='7'>Nessun risultato trovato</td></tr>";
    }
    ?>
</table>
<?php
$Comuni->pagination($t, $pagina, $conta, $n);

cRIRIc

Menù

Top 5

Tabella con ricerca dinamica

tabella, dinamica, colonne, php, jquery

criric

Inserisci un commento

Categorie

Comunicazioni