Frage Mehrdimensionales Array sortieren

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
Guten Tag liebe Community,

ich wollte fragen wie genau man ein zwei dimensionales Array anhand sortiert.
Um genauer zu sein soll im Array[x][y] das x anhand der Daten im y sortiert werden

Array[0][23123,AB:SJ:56:78:12:95]
Array[1][1234,FF:FF:FF:FF:FF:FF]

jetzt weiß ich nicht wie ich die x stelle anhand der zweiten y stelle sortieren soll

Hier mein Code:

HTML:
<!-- HTML Auschnitt -->
<table>
            <thead>
                <tr>
                    <td>X</td>
                    <td id="cellHead">Seriennummer <span id="srnnmmr" class="clckableSpn"><i id="srnnmmrFont" class="fas fa-arrow-up"></i></span></td>
                    <td id="cellHead">MAC <span id="mc" class="clckableSpn"><i class="fas fa-arrow-up"></i></span></td>
                    <td id="cellHead">Hersteller <span id="hrstllr" class="clckableSpn"><i class="fas fa-arrow-up"></i></span></td>
                    <td id="cellHead">Kauf Datum <span id="kfDtm" class="clckableSpn"><i class="fas fa-arrow-up"></i></span></td>
                    <td id="cellHead">Hostname <span id="hstnme" class="clckableSpn"><i class="fas fa-arrow-up"></i></span></td>
                    <td id="cellHead">Typ <span id="typ" class="clckableSpn"><i class="fas fa-arrow-up"></i></span></td>
                    <td>Software Version</td>
                    <td>Wartung</td>
                    <td>Beschreibung</td>
                    <td>Bemerkung</td>
                </tr>
            </thead>
            <tbody id="tableData">
                <tr class="rowData" id="r1">
                    <td class="cellData" id="r1t1">X</td>
                    <td class="cellData" id="r1t2">84564153</td>
                    <td class="cellData" id="r1t3">FF:FF:AA:CC:DD:EE</td>
                    <td class="cellData" id="r1t4">Siemens</td>
                    <td class="cellData" id="r1t5">12.1.2019</td>
                    <td class="cellData" id="r1t6">Host1</td>
                    <td class="cellData" id="r1t7">typ1</td>
                    <td>/</td>
                    <td>/</td>
                    <td>/</td>
                    <td>/</td>
                </tr>
JavaScript:
// Mein JS Code

// aCount ist der die anzahl der cellhead damit nicht alle cellData in ein Arrayfeld kommen
if (aCount == 0) {
    // Array mit Daten füllen
    for (var index = 0 ; index < rows.length; index++) {
        a[index] = [];
        console.log("Array 1: ");
        for (aCount; aCount < cellsHead.length; aCount++) {
            a[index][index2].push(rows[index].id);
            a[index][index2].push(cells[index2].textContent);
            console.log("Array 12: " + a[index][index2]);
        }
    }
    aCount = 0;
}
    
    

// Sortieren Funktion
// Es soll die erste Diemension anhand der Daten der Zweiten Dimension sortiert werden
function srt() {
    let varSwtich = this.parentNode.textContent; // clckableSpn hat ein click eventlistener 
    switch(varSwtich){
        case "Seriennummer":
            var a2 = a;
            if (a2.sort().toString == a.toString) { // falls es schon soritert ist soll es reversed werden 
                a.reverse(); // wird hier jetzt beide Dimensionen sortiert oder nur die erste ?
                srnnmmrFont.class = "fas fa-arrow-up"; // außerdem soll sich das icon ändern
            } else {
                a.sort();
                srnnmmrFont.class = "fas fa-arrow-down";
            }
            break;
        case "MAC":
            break;
        default:
            break;
    }
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Das geht relativ einfach mit dem Standard-sort wenn Du eine Vergleichsfunktion verwendest:
Code:
a.sort(function(a, b) {
    return parseInt(a[1]) - parseInt(b[1]);
});
 
  • Love
Reactions: BetaOps

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
Alles klar vielen Dank!!!
Funktioniert es mit numerischen und alphanumerischen Daten gleichermaßen ?
Und könntest du mir vielleicht ein Ansatz geben wie ich am besten die Tabelle anhand der Daten im Array sortieren soll?
das unten kann so nicht ganz funktionieren weil sobald aCount zu groß ist direkt aus der zweiten forschleife gesprungen wird, aber ich hab keine Ahnung wie ich des sonst machen soll

Ich würde es so machen :

JavaScript:
// Sortieren Funktion
// Es soll die erste Diemension anhand der Daten der Zweiten Dimension sortiert werden
function srt() {
    let varSwtich = this.parentNode.textContent;
    switch(varSwtich){
        case "Seriennummer":
            var a2 = a;
            if (a2.sort().toString == a.toString) { // muss ich noch deinem Code anpassen
                if (aCount == 0) {
                    for (var index = 0 ; index < cellHead.length; index++) {
                        // cellhead benutze ich nur damit ich die zeilen beim zugriff unterscheiden kann
                        // wegen der Nodelist : var cells = document.getElementsByClassName("cellData");
                        for (aCount; aCount < a[index].length; aCount++) {
                            // hier dann auf die Tabellenzelle (td:cells) zugreifen und mit dem inhtalt vom array füllen
                            // acount benutze ich nur weil ich ja alle td in einer Nodelist
                            // habe und die nicht direkt einer zeile zu geordnet habe
                            // also nach dem die Zweite for schleife fertig wäre müsste ich irgendwie auf größere td's zugreifen
                        }
                    }
                    aCount = 0;
                }
                srnnmmrFont.class = "fas fa-arrow-up";
            } else {
                a.sort();
                srnnmmrFont.class = "fas fa-arrow-down";
            }
            break;
}

Bearbeitet:
Theoretisch kann ich die Nodelist in ein Array tun und damit dann einfacher die for-schleifen durchlaufen und neu zuweisen oder nicht ? :s
Also ich frage nur so dumm weil mein ganzer Code nicht funktioniert, keine Errors und auch keine Konsolen ausgaben
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
  • Love
Reactions: BetaOps

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
Vielen Dank du rettest mich <3 !
Da ich noch nie jQuery benutzt habe muss ich dich leider fragen wie ich es jetzt einbinde
Also jQuery in mein projekt einbinden und danach die obrigen Files einbinden, danach Features enablen und fertig oder ?
Bearbeitet:
Es hat funktioniert vielen Dank!!!!!!!!!!!
 
Zuletzt bearbeitet:

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
Kannst du mir vielleicht verraten wie ich die Such-und Sortierungsfunkion in den spalten ausschalte, die Referenz gibt mir mehr fragen als antworten

JavaScript:
 $('#tableData').dataTable({
            "columns": [
              { "searchable": false,
                "orderable": false, "targets": 0},
              null,
              null,
              null,
              null
            ]
        });
Da stand dass ich im Array jede spalte trotzdem eintragen muss, aber wenn ich es wie oben beschrieben mache funktioniert es nicht
Ich kann mir schon denken dass jedes Null eine Spalte repräsentiert und aber welche ID muss ich benutzen oder muss ich erst den spalten eine ID zuweisen ?
 

basti1012

Senior HTML'ler
26 November 2017
1.035
110
63
38
Minden
sebastian1012.bplaced.net
Meinst du mit Such auch das Suchfeld ?
So ist das Suchfeld weg und wenn man oben auf die Spalten klickt werden die nicht mehr Sortiert
Code:
$('#tableData').dataTable({
           searching: false,
           ordering: false
});
Meinst du das so
 
  • Like
Reactions: BetaOps

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
genau, aber nur bei ein paar Spalten. In der Doku stand drin dass ich Null für jede spalte eintragen soll damit das Array mit dem befehl umgehen kann
Ich hab es versucht mit dem obigen Code (von mir) aber es hat sich nichts verändert ....
Muss ich es beim initialisieren machen ?
Also ungefähr so

JavaScript:
$(document).ready( function () {
            $('#dataTable').DataTable({
            "columns": [
              { "searchable": false,
                "orderable": false, "targets": 0},
              null,
              null,
              null,
              null
            ]
        });
        } );
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Kannst du mir vielleicht verraten wie ich die Such-und Sortierungsfunkion in den spalten ausschalte
Die Suchfunktion ist bei Datatables global, das Eingabefeld rechts oben, das mit "Search" beschriftet ist. Diese Suche kannst Du, ebenfalls global, ausschalten, so wie Basti es angegeben hat.
Mit der Option "columns", die Du angibst, deaktiviert man die Suche für bestimmte Spalten, sofern sie global eingeschaltet ist. IDs brauchst Du dort nicht, die Parameter werden einfach aufgezählt für die Spalten in der Reihenfolge, wie sie in der Tabelle vorhanden sind. null bedeutet, dass für die betr. Spalte nichts ausgeschaltet wird. Willst Du z. B. die Sortierfunktion für mehrere Spalten ausschalten, musst das Objekt mehrfach angeben, z. B. so:
Code:
            "columns": [
              { "searchable": false,
                "orderable": false, "targets": 0},
              null,
              { "searchable": false,
                "orderable": false, "targets": 0},
              null,
              null
            ]
Schaltet Suche und sortieren für die erste und die dritte Spalte aus.
Allerdings: Die Sortierfunktion wolltest Du doch gerade haben?
 
  • Like
Reactions: BetaOps

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
Ja ich wollte die Sortierfunktion nur in einer Spalte aufheben, weil diese ein Button Bearbeiten enthalten soll
Es Funktioniert aber bei mir leider nicht :s
Ich hab mal einfach mal ein Bild eingefügt
5213
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Verstehe, das macht natürlich Sinn.
Leider kann ich den Anhang nicht öffnen. Besser wäre wahrscheinlich ein Link zu der Seite.
 
  • Like
Reactions: BetaOps

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
Leider kenne ich keine Möglichkeit es online zu stellen, deshalb hier der Code

JavaScript:
// Das habe ich benutzt zum Konfigurieren

$(document).ready(function () {
            $('#tableData').DataTable();
        });
        $('#tableData').dataTable({
            "columns": [
              null,
              {
                  "searchable": false,
                  "orderable": false, "targets": 0
              },
            ]
        });
und dann eine Zwei Spalten Tabelle

HTML:
<div style="overflow-x:scroll;width:500px;">
    <table id="tableData" class="display">
        <thead>
            <tr>
                <td>Seriennummer</td>
                <td id="BearbeitenCol"></td>
            </tr>
        </thead>
        <tbody >

            <tr class="rowData" id="r1">
                <td class="cellData" id="r1t1">84564153</td>
                <td class="cellData" id="r1t2">X</td>
            </tr>

            <tr class="rowData" id="r2">
                <td class="cellData" id="r2t1">55415741</td>
                <td class="cellData" id="r2t2">X</td>
            </tr>
        </tbody>
    </table>
</div>
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.486
295
83
66
Du initialisierst die Tabelle doppelt und die zweite Ini ist nicht im document-ready:
Code:
$(document).ready(function () {
            $('#tableData').DataTable(); // erste Initialisierung
        });
        $('#tableData').dataTable({ // zweite Initialisierung
            "columns": [
              null,
              {
                  "searchable": false,
                  "orderable": false, "targets": 0
              },
            ]
        });
So funktioniert es:
Code:
    $(document).ready(function () {
        $('#tableData').dataTable({
            "columns": [
              null,
              {
                  "searchable": false,
                  "orderable": false
              },
            ]
        });
    });
(das target brauchst Du nur bei columnDefs)
 
  • Love
Reactions: BetaOps
Werbung:

Latest posts