CSV-Datei einlesen und dynamisch als Tabelle ausgeben

Viele CSV-Dateien, wenn man sich diese mit einem Editor anschaut, sind oft schwer zu lesen. Als Trennzeichen in der CSV-Datei fungiert meist ein Komma, ein Strichpunkt; oder ein Mittelstrich |.

David Brittain;1954-05-03;London;England;5558;david@mail.com;1
Shuichiro Inomata;1995-09-12;Tokio;Japan;6522;shui@mail.com;2
M. Houssouba;2002-03-05;Kapstadt;S.Afrika;9325 3307;mohu@mail.com;3
Margaret Melton;1979-11-15;Sydney;Australien;5822 7754;melton@mail.com;4
Ruslan Belkin;1977-04-09;Moskau;Russland;3636;rbelkin@mail.com;5
Rafael Martinez;1996-01-30;Madrid;Spanien;11985 884;rafmartin@mail.com;6
Moacir de Oliveira;1981-09-10;Porto;Portugal;9865 5681;oliveira@mail.com;7
Sander Roobol;1966-07-25;New York;USA;6325 70029;roobol@mail.com;8
Dan Scott;1975-08-17;Tallinn;Estland;5658 8103;dscott@mail.com;9
Masahiro Takagi;2001-12-06;Hongkong;China;5862 5578;takagi@mail.com;10
Torben Wilson;1989-06-01;Ottawa;Kanada;3652 11228;t-wilson@mail.com;11
Jouni Ahto;1992-02-07;Athen;Griechenland;5214 078;ahto@mail.com;12

Um die Daten besser zu formatieren, können diese in eine HTML-Tabelle eingelesen und ausgegeben werden.

Demo

Auswahl:

➤ Wähle eine CSV-Datei aus der Auswahlliste!

Eigenschaften

CSV-Dateien auswählen und laden
Filterfunktion für die Tabelle
Tabellen-Spalten sind sortierbar
CSV-Datei exportieren

Die Anleitung wie alles genau funktioniert, finden Sie im folgenden Quelltext.

Quelltext: csv-datei_einlesen.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑

<?php

/*

 * CSV-Datei einlesen und dynamisch als Tabelle ausgeben

 * - https://werner-zenk.de/scripte/csv-datei_einlesen_und_dynamisch_als_tabelle_ausgeben.php

 */



$verzeichnis = "daten/"; // Verzeichnis der Daten

$dateiendung = "csv"; // Dateiendung

$trenner = ";"; // Trennzeichen



// Verzeichnisliste ausgeben

if (isset($_GET["liste"])) {



    // Verzeichnis auslesen

    foreach (array_slice(scanDir($verzeichnis), 2) as $datei) {

        $path = pathinfo($datei);

        if ($path["extension"] == $dateiendung) {

            $arr[] = ['datei' => $datei];

        }

    }



    // Und im JSON-Format ausgeben

    echo json_encode($arr);

    exit;

}



// Tabelle ausgeben

if (isset($_GET["ausgeben"])) {



    // Tabellenkopf - Spalten-Beschriftungen

    // Je nach Anzahl der Spalten anpassen!

    $tabellenSpalten = [

        'Name',

        'Geb.',

        'Stadt',

        'Land',

        'Tel.',

        'Mail',

        'Nr.',

    ];



    // Tabellenkopf - Spalten-Typen (string/number)

    $tabellenSpaltenTypen = [

        'string',

        'number',

        'string',

        'string',

        'number',

        'string',

        'number',

    ];



    // Filter-Funktion

    $ausgabe = ' <p><label for="filter">Filter:</label>

       <input type="search" class="filter-table" id="filter" data-for="#foobar-table" spellcheck="false"> &emsp;

       <button type="button" id="export" title="Tabelle als CSV-Datei exportieren">Exportieren</button></p>';



    // Tabellenkopf erstellen

    $caption = 'Tabelle: ' . str_replace('.' . $dateiendung, '', $_GET["ausgeben"]);

    $ausgabe .= '<table id="foobar-table"><caption> ' . $caption . ' </caption><thead><tr>';



    foreach ($tabellenSpalten as $i => $spalte) {

        $ausgabe .= '<th data-type="' . $tabellenSpaltenTypen[$i] . '" title="Nach ' . $spalte . ' sortieren">' . $spalte . '</th>';

    }

    $ausgabe .= '</tr></thead>';



    // Tabellenkörper erstellen

    $ausgabe .= '<tbody>';



    // Datei auslesen

    $datensaetze = file($verzeichnis . $_GET["ausgeben"], FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);

    foreach ($datensaetze as $nr => $datensatz) {



        //if ($nr > 0) { // Wenn Spaltenüberschriften in der CSV-Datei vorhanden sind



        // PHP-Variablen - Je nach Anzahl der Spalten anpassen!

        list($s[1], $s[2], $s[3], $s[4], $s[5], $s[6], $s[7],) = explode($trenner, $datensatz);



        // Tabellenzeilen und Spalten erstellen

        $ausgabe .= '<tr>';

        for ($i = 1; $i <= count($tabellenSpalten); $i++) {

            $ausgabe .= '<td>' . htmlspecialchars($s[$i]) . '</td>';

        }

        $ausgabe .= '</tr>';

        //}

    }



    // Tabelle ausgeben

    exit($ausgabe . '</tbody></table>');

}

?>

<!DOCTYPE html>

<html lang="de">



<head>

    <meta charset="UTF-8">

    <title> CSV-Datei einlesen und dynamisch als Tabelle ausgeben</title>



    <style>

        body, input, button, select {

            font-family: Arial, Tahoma, Sans-Serif;

            font-size: 0.93rem;

        }



        /* Tabelle */

        table#foobar-table {

            font-family: Arial, Tahoma, Sans-Serif;

            font-size: 0.90rem;

            border-spacing: 1px;

        }



        /* Tabellenüberschrift */

        table#foobar-table>caption {

            caption-side: top;

            padding: 5px;

        }



        /* Tabellenkopf fixieren */

        table#foobar-table>thead {

            position: sticky;

            inset-block-start: 0;

        }



        /* Spalten anpassen */

        table#foobar-table>thead>tr>th,

        table#foobar-table>tbody>tr>td {

            color: #000000;

            padding: 5px;

            transition: background-color 0.3s;

            outline: Solid 1px #A4A4A4;

        }



        table#foobar-table>thead>tr>th {

         font-weight: 550;

        }



        /* Tabellenkopf spaltenweise einfärben */

        table#foobar-table thead>tr th:nth-child(even) {

            background-color: rgba(207, 207, 207, 0.9);

            cursor: pointer;

        }



        table#foobar-table thead>tr th:nth-child(odd) {

            background-color: rgba(217, 217, 217, 0.9);

            cursor: pointer;

        }



        /* Tabellenkörper zeilenweise einfärben */

        table#foobar-table tbody>tr:nth-child(even) {

            background-color: rgba(236, 236, 236, 0.9);

            transition: background-color 0.3s;

        }



        table#foobar-table tbody>tr:nth-child(odd) {

            background-color: rgba(255, 255, 255, 0.9);

            transition: background-color 0.3s;

        }



        table#foobar-table tbody>tr>td:nth-child(even) {

            background-color: rgba(190, 190, 190, 0.1);

            transition: background-color 0.3s;

        }



        /* Tabellenzeilen bei Mouseover ändern */

        table#foobar-table tbody>tr:hover {

            background-color: #FFFFCE;

        }



        /* Tabellenspalten bei Mouseover ändern */

        table#foobar-table thead>tr>th:hover {

            background-color: #C0C0C0;

        }



        table#foobar-table tbody>tr>td:hover {

            background-color: #FFFF9F;

        }



        /* Pfeil nach oben */

        .upArrow::after {

            content: "\2191";

            color: #FFFFFF;

            text-shadow: 1px 1px 0px #000000;

            position: absolute;

        }



        /* Pfeil nach unten */

        .dnArrow::after {

            content: "\2193";

            color: #FFFFFF;

            text-shadow: 1px 1px 0px #000000;

            position: absolute;

        }

    </style>



    <script>

        // Beim laden der Seite diese Funktion aufrufen

        window.addEventListener('DOMContentLoaded', function() {



            // Die gleiche Datei (document.URL) aufrufen und GET-Parameter (liste) übergeben

            fetch(`${document.URL}?liste`, {



                // Übertragungsmethode: GET

                method: "GET",

            }).then(antwort => {



                // Die Antwort vom Server als Text auswerten:

                return antwort.text();

            }).then(antwort => {



                // Die erhaltenen Daten in einzelne Objekte zerlegen (JSON)

                var obj = JSON.parse(antwort);



                // Neue Elemente in die Auswahlliste einfügen

                for (var counter = 0; counter < obj.length; counter++) {

                    document.querySelector('select[name="selection"]').options[counter] = new Option(obj[counter].datei, obj[counter].datei);

                }



                // Dem HTML-Button (button[name="anzeigen"]) den Event: "click" zuweisen,

                // dieser ruft dann die Funktion: ladeTabelle() auf.

                document.querySelector('button[name="anzeigen"]').addEventListener('click', ladeTabelle);

            });

        });



        const ladeTabelle = () => {



            // Den Wert des ausgewählten Elements in der Auswahlliste auslesen

            var sel = document.querySelector('select[name="selection"]').value;



            // Den Wert (sel) mit der Anfrage über GET senden

            fetch(`${document.URL}?ausgeben=${sel}`, {



                // Übertragungsmethode: GET

                method: "GET",

            }).then(antwort => {



                // Die Antwort vom Server als Text auswerten:

                return antwort.text();

            }).then(antwort => {



                // Antwort vom Server im HTML-Element eintragen:

                document.getElementById("ausgabe").innerHTML = antwort;



                // Starte Funktionen

                starteFunktionen();

            });

        }



        const starteFunktionen = () => {



            // HTML-Tabelle sortieren

            const table = document.getElementById("foobar-table");

            const headers = table.querySelectorAll("th");

            const tableBody = table.querySelector("tbody");

            const rows = tableBody.querySelectorAll("tr");

            const directions = Array.from(headers).map(function(header) {

                return "";

            });



            // Spalten je nach HTML-Attribut sortieren

            const transform = function(index, content) {

                const type = headers[index].getAttribute("data-type");

                switch (type) {

                    case "number":

                        return parseFloat(content);

                    case "string":

                    default:

                        return content;

                }

            };



            const sortColumn = function(index, headers) {



                // CSS-Klassen entfernen

                const cls = ["upArrow", "dnArrow"];

                headers.forEach((header) => {

                    document.getElementById(header.id).classList.remove(...cls);

                });



                // Richtung aufsteigend (asc) oder absteigend (desc)

                const direction = directions[index] || "asc";

                const multiplier = (direction === "asc") ? 1 : -1;



                // CSS-Klasse hinzufügen

                const cssSort = (direction === "asc") ? cls[0] : cls[1];

                document.getElementById(index).classList.add(cssSort);



                const newRows = Array.from(rows);

                newRows.sort((rowA, rowB) => {

                    const cellA = encodeURIComponent(rowA.querySelectorAll("td")[index].textContent.toLowerCase());

                    const cellB = encodeURIComponent(rowB.querySelectorAll("td")[index].textContent.toLowerCase());



                    const a = transform(index, cellA);

                    const b = transform(index, cellB);



                    switch (true) {

                        case a > b:

                            return 1 * multiplier;

                        case a < b:

                            return -1 * multiplier;

                        case a === b:

                            return 0;

                    }

                });



                [].forEach.call(rows, function(row) {

                    tableBody.removeChild(row);

                });



                directions[index] = direction === "asc" ? "desc" : "asc";

                newRows.forEach(function(newRow) {

                    tableBody.appendChild(newRow);

                });

            };



            [].forEach.call(headers, function(header, index) {

                header.setAttribute("id", index);

                header.addEventListener("click", () => {

                    sortColumn(index, headers);

                });

            });



            // HTML-Tabelle filtern

            document.querySelectorAll('.filter-table').forEach(function(input) {

                var table = document.querySelector(input.dataset.for);

                var rows = table.querySelectorAll('tbody tr');

                input.addEventListener('input', function(event) {

                    rows.forEach(function(tr) {

                        tr.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase());

                    });

                });

            })



            // Tabelle als CSV-Datei exportieren

            const exportBtn = document.getElementById('export');



            const toCsv = function(table) {

                const rows = table.querySelectorAll('tr');



                return [].slice.call(rows)

                    .map(function(row) {

                        const cells = row.querySelectorAll('th,td');

                        return [].slice.call(cells)

                            .map(function(cell) {

                                return cell.textContent;

                            })

                            .join(';'); // Trennzeichen

                    })

                    .join('\n');

            };



            const download = function(text, fileName) {

                const link = document.createElement('a');

                link.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(text)}`);

                link.setAttribute('download', fileName);



                link.style.display = 'none';

                document.body.appendChild(link);



                link.click();

                document.body.removeChild(link);

            };



            exportBtn.addEventListener('click', () => {

                const csv = toCsv(table);

                let fileName = document.querySelector('select[name="selection"]').value;

                download(csv, fileName);

            });

        }

    </script>



</head>



<body>



    <p>

        <label>Auswahl:

            <select name="selection">

            </select>

        </label>

        <button type="button" name="anzeigen">Anzeigen</button>

    </p>



    <div id="ausgabe">Wähle eine CSV-Datei aus der Auswahlliste!</div>



</body>



</html>

Siehe auch: CSV-Datei auslesen, HTML-Tabelle filtern, HTML-Tabelle sortieren, HTML-Tabelle Spaltenbreite anpassen, Tabellenkalender und HTML-Tabelle als CSV-Datei exportieren