Tabellen sortieren (ASC/DESC)

[EuroCent]

Hallo und Guten Morgen zusammen,

ich habe folgendes Problem bzw. benötige eure Hilfestellung.

Ich habe eine Datei in denen Ich mehrere Tabellen erstellt habe:

<!-- Sort: ASC - Standard //-->
<div id="tabellen">
<table id="1"></table>
<table id="2"></table>
<table id="3"></table>
<table id="4"></table>
</div>

Nun möchte Ich mittels einer Select Box, zwischen aufsteigend und absteigend die Tabellen sortieren.

<!-- Sort: DESC //-->
<div id="tabellen">
<table id="4"></table>
<table id="3"></table>
<table id="2"></table>
<table id="1"></table>
</div>

So sieht es eigentlich aus:

<div id="table-products">
<?php
    require_once 'produkte.php';
?>
</div>

in produkte.php sind eben die Tabellen.

Jetzt fehlt mir allerdings der Ansatz wie Ich diese zum Sortieren bekomme :/

 

[Sempervivum]

Da gibt es etwas vorgefertigtes, siehe hier:
DataTables | Table plug-in for jQuery
Features, die Du nicht brauchst, kannst Du problemlos wegkonfigurieren:
DataTables example - Feature enable / disable

 

[Sempervivum]

PS: Ich habe jetzt genauer gelesen und gesehen, dass Du ja nicht die Spalten in den Tabellen sortieren willst, sondern die Tabellen selber. Das kannst Du mit dieser Funktion erledigen:

    <!-- Sort: ASC - Standard //-->
    <div id="tabellen">
        <table id="1">
            <tr>
                <td>1</td>
            </tr>
        </table>
        <table id="2">
            <tr>
                <td>2</td>
            </tr>

        </table>
        <table id="3">
            <tr>
                <td>3</td>
            </tr>

        </table>
        <table id="4">
            <tr>
                <td>4</td>
            </tr>
        </table>
    </div>
    <script>
        function sortit(reverse) {
            var nodelist = document.querySelectorAll('#tabellen table');
            var arr = Array.prototype.slice.call(nodelist);
            arr.sort(function (a, b) {
                return parseInt(a.id) - parseInt(b.id);
            });
            if (reverse) arr = arr.reverse();
            arr.forEach(function (item, idx) {
                document.getElementById('tabellen').appendChild(arr[idx]);
            });
        }
        sortit(true);
    </script>

Oder, wenn die Reihenfolge nur einfach umgekehrt werden soll:

    <button onclick="toggleit();">Reihenfolge umkehren</button>
    <script>
        function toggleit() {
            var nodelist = document.querySelectorAll('#tabellen table');
            for (var i = nodelist.length - 1; i >= 0; i--) {
                document.getElementById('tabellen').appendChild(nodelist[i]);
            }
        }
    </script>

 

[EuroCent]

Super mega, vielen lieben Dank