Vanilla-DataTables in "Mobirise5"

Moin,

nachdem unser "Andyneu" ja ein ganz tolles JavaScript zum alphabetischen Sortieren eines Akkordeons geschrieben hat:

viewtopic.php?p=11278#p11278

... wollte ich mal mein Problem hier erläutern.

Mit "Mobirise4" konnte man Tabellen über jQuery vorsortiert darstellen, so wie ich z.B. hier bei meiner Tutorial-Übersicht:

https://www.mobirise-tutorials.com/Tutorial-Links/

Dort habe ich die erste Spalte "Datum" > 'desc' (descending / absteigend) sortiert, sodass beim Aufruf der Seite immer mein neuestes Tutorial oben steht. Dazu habe ich dieses jQuery-Skript verwendet:

Code: Alles auswählen

<!-- meine Tabelle neu sortieren. Datum (0) = absteigend -->
<script>
    var table = $('#meineTabelle').DataTable();
     
    // sortieren nach Spalte 0 und dann neu anlegen
    table
        .order( [ 0, 'desc' ] )
        .draw();
</script>

Bei Tabellen fangen die Spalten links mit 0 an. 0 ist also die erste Spalte "Datum", die zweite Spalte ist 1, usw.

Das bekomme ich mit den neuen Skripten "Vanilla-DataTables" noch nicht hin, obwohl das auch dort gehen müsste:

https://github.com/Mobius1/Vanilla-DataTables

... weiter Anleitungen findet man hier - also auch das Vorsortieren nach Spalte und Richtung:

https://github.com/Mobius1/Vanilla-Data ... atablesort

Ich vermute, dass dieses Skript dafür zuständig sein könnte - nur mit welchem Inhalt

Code: Alles auswählen

dataTable.on('datatable.sort', function(column, direction) {
    //
});

... leider habe ich zu wenig Ahnung von JavaScript um das zu realisieren. Kann da jemand helfen? Andy?

Hier ist die gleiche Tabelle wie oben in "Mobirise4" von mir, nun in "Mobirise5", die eben dort das Skript "Vanilla-DataTables" verwendet:

https://www.mobirise-tutorials.com/Test ... ml#Tabelle

Hier steht dann eben noch die Spalte auf 'asc' (ascending / aufsteigend) und somit der älteste Eintrag ganz oben - es soll aber auf 'desc' stehen - also der neueste Beitrag ganz oben.

Für diesen Test kann man irgendeine Mobirise-Tabelle, zum Beispiel aus dem Thema "StoreM4" (in meinen Beispielen), verwenden und in einem "Mobirise5" Thema wie z.B. dem Standard-Thema "Mobirise5" aufziehen. Mobirise verwendet dann in "Mobirise5" automatisch die neuen "Vanilla-DataTables" Skripte, anstelle von noch den jQuery-Skripten aus "Mobirise4".

Hallo,
ich habe eine Lösung für das Sortieren von HTML Tabellen. Allerdings nicht auf Basis von Vanilla-DataTables.
https://www.awm-websoft.de/entwicklung/ ... tabel.html

Zugangsdaten:
User: KdUser
PW: start123

in meinem Bsp. habe ich eine TAbelle aus dem Theme Store4M genommen. Dieser Tabelle habe ich eine ID verpaßt

Code: Alles auswählen

id="myTabel"

Unter Seiteneinstellungen im Feld End of <body> Code habe ich folgendes Script eingefügt:

Code: Alles auswählen

  <script>
function sortTableByDateDesc() {
                    var table, rows, switching, i, x, y, shouldSwitch;
                    table = document.getElementById("myTable");
                    switching = true;
        
                    while (switching) {
                        switching = false;
                        rows = table.getElementsByTagName("tr");
        
                        for (i = 1; i < (rows.length - 1); i++) {
                            shouldSwitch = false;
        
                            x = rows[i].getElementsByTagName("td")[1]; // Index 1 ist das Datum
                            y = rows[i + 1].getElementsByTagName("td")[1];
        
                            var dateX = parseDate(x.innerHTML); // Datum in parseDate-Funktion konvertieren
                            var dateY = parseDate(y.innerHTML);
        
                            if (dateX < dateY) { // Sortieren absteigend (desc)
                                shouldSwitch = true;
                                break;
                            }
                        }
        
                        if (shouldSwitch) {
                            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                            switching = true;
                        }
                    }
                }
        
                function parseDate(dateString) {
                    var dateParts = dateString.split(".");
                    return new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
                } 


    </script>
<script>sortTableByDateDesc();</script>

Das funktioniert vollständig.

@Tommy
Zweite Tabelle auf dieser Seite ist die von dir. Bei der funktioniert mein script nur bedingt.
Wenn die Seite geladen wird werden in deiner Tabelle nur eine gewisse Anzahl an Datensätzen geladen. Diese werden dann auch richtig sortiert. Wenn man dann aber den zweiten Datensatz lädt funktioniert die Sortierung nicht. da habe ich noch keine Lösung für gefunden.
Das Script für die Tabelle von Tommy weicht auch etwas von der ersten Tabelle ab.

Vielleicht fällt ja noch jemanden dafür eine Lösung ein

Code: Alles auswählen

<script>
                 function sortTableByDateDesc1() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable1");
  switching = true;

  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("tr");

    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;

      x = rows[i].getElementsByTagName("td")[0]; // Index 0 ist das Datum
      y = rows[i + 1].getElementsByTagName("td")[0];

      var dateX = parseDate(x.innerHTML); // Datum in parseDate-Funktion konvertieren
      var dateY = parseDate(y.innerHTML);

      if (dateX < dateY) { // Sortieren absteigend (desc)
        shouldSwitch = true;
        break;
      }
    }

    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

function parseDate(dateString) {
  var dateParts = dateString.split("-");
  return new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
}
    </script>
<script>sortTableByDateDesc1();</script>

Hallo Andy,

tausend Dank für Deinen Einsatz und die große Mühe, die Du Dir gemacht hast.

Das ist eben das Problem, diese Seiten sind ja auch seit den neuen Skripten "Vanilla-DataTables" hinzu gekommen.

Man nennt doch das ganz normale JavaScript "Vanilla" im Gegensatz zum Framework "jQuery":

https://www.yuhiro.de/was-ist-vanilla-javascript/

Die Lösung muss also für jede Tabelle funktionieren und eben gerade auch für diese Seiteneinteilung. Meine Tabelle wurde ja ebenso mit dem Thema "StoreM4" erstellt und nun einfach im Thema "Mobirise5" angewendet.

Es gibt gar keine Tabellen in "Mobirise5 - Themen" und alle Tabellen funktionieren noch gleich, verwenden nun eben nur andere JS-Komponenten.

Meine Tabelle ist die ganz normale Tabelle aus "StoreM4", diese wird nur mit den neuen Skripten in "Mobirise5" so dargestellt. Ab der 11. Reihe erscheint eine nächste Seite und dass eben alle 10 Reihen.

Bei Deiner Tabelle (erste Tabelle) sieht man das nur nicht, da diese ja nur 7 Zeilen hat.

Die Sortierung funktioniert also nur für die angezeigten Elemente. Auch beim Klick oben links zur Auswahl von meinetwegen 25 anstatt 10 (Default) Tabellenzeilen geht es nicht mehr und beim Blättern durch meine 12 Seiten eben auch nicht.

Wenn Du 2 Mal auf die Spalte "Datum" klickst, dann wird die gesamte Tabelle absteigend (desc) und korrekt dargestellt - und zwar über alle 12 Seiten. So sollte es sein und so muss es auch irgendwie gehen, denn so ist es im Skript ja auch programmiert. Leider ist eben die Darstellung einer solchen "Vorsortierung" im Moment nicht vorgesehen. Das war übrigens auch im alten Skript mit jQuery nicht vorgesehen, dort gab es aber überall verständliche Anleitungen dafür, wie jenes Skript, das ich in meinem ersten Beitrag oben zeige.

Das sollte aber für die Entwickler von Mobirise eigentlich kein großes Problem sein und es bestehen ja auch Anweisungen dazu, die ich aber nicht verstehe:

https://github.com/Mobius1/Vanilla-Data ... atablesort

Vanilla DataTable hat geschrieben: datatable.sort

Fires when the table is sorted.

Two arguments are available when listening for this event: column which returns the column index and direction which returns the sort direction:

dataTable.on('datatable.sort', function(column, direction) {
//
});

Gucke doch auch nochmals hier:

https://github.com/Mobius1/Vanilla-Data ... /columns()

... müsste das nicht so ähnlich aussehen wie:

Code: Alles auswählen

var dataTable = new DataTable("#myTable", {
 select: 0,
 direction: desc,
});

Ich kenne nur eben den Syntax nicht richtig für JavaScript

... und wo muss dann diese Funktion z.B. stehen: 'datatable.sort', function(column, direction)

... wie muss das verstanden werden?

sort(column [integer], direction [string])

[integer] ist ja 0 (erste Spalte) und [string] wäre dann desc (absteigend)

Nochmals vielen Dank für Deine Mühe - das ist dann wohl ein Problem von Mobirise. Sie haben dort ja fähige Entwickler sitzen, die sich der Sache mal annehmen müssten.

Bei der Gelegenheit musste ich auch feststellen, dass alle Tabellen maximal 500 Einträge zulassen. Auch das ist schlecht und nicht so richtig zu verstehen. Ich habe noch nicht gefunden wo das steht - vielleicht in der JS von Bootstrap.

Man müsste (finde ich) auch einen Schalter haben, der bestimmt ob die Tabelle in dieser Seitenansicht angezeigt wird oder eben nicht - so wie noch in "Mobirise4" in einem Stück.

Ich werde Mobirise dementsprechend mit jedem Update damit nerven

Hallo Tommy,
ja so sollte der Code aussehen. Den String DESC noch in Anführungszeichen und nach dem letzten Eintrag noch das Komma weg aber dann ist richtig.

Aber hier scheint sich das Script intern mit Mobirise zu blocken. Denn das war auch mein erster Versuch. Ich konnte es aber so nicht zum laufen bringen. Sollen sich die Leute mit auseinandersetzen, die sich sowieso schon mit den Vanilla Framework beschäftigt haben.

In vielen Fällen ist es einfach schneller und leichter einzelne html-Seiten ohne Mobirise zu schreiben. Kann man dann ja später zusammenfügen.

Habe jetzt zumindest mal mein anderen Wunsch realisiert, nämlich die Default-Anzeige von 10 pro Seite auf einen anderen Wert (jetzt 100 pro Seite) zu setzen und eben eine andere Staffelung der Anzeige vorzunehmen, jetzt:

Code: Alles auswählen

        // Edit Tommy 
        // and above changed from 10 to 100 per page
        // ={perPage:100,perPageSelect:[5,10,15,20,25]
        perPageSelect: isSearch ? [5,10,50,100,200,500] : false,

https://www.mobirise-tutorials.com/Test ... ml#Tabelle

Mobirise-Tutorials.com

Vanilla-DataTables in "Mobirise5"

Vanilla-DataTables in "Mobirise5"

Re: Vanilla-DataTables in "Mobirise5"

Re: Vanilla-DataTables in "Mobirise5"

Re: Vanilla-DataTables in "Mobirise5"

Re: Vanilla-DataTables in "Mobirise5"

Wer ist online?