Datatables in Websites einbinden (inkl. Dropout)

[Dsimon24]

Moin zusammen,

mal wieder komme ich nicht wirklich mit DataTables zurecht .

Auf der Seite datatables.net befindet sich direkt am Anfang ein Beispiel von einer Tabelle.
Besonderheit darin: Am Anfang jedes Datensatzes befindet sich ein kleiner grüner Button,
über den ich noch ein paar <td>´s quasi ausfahren kann, die nicht direkt in der Tabelle an-
gezeigt werden.

Wie genau kann ich das denn realisieren? Ich finde auf der Webseite kein Beispiel in
diesem das mit Beispielcode hinterlegt ist. Vielleicht hat einer eine Idee, wie ich das
realisieren kann?

VG, David

 

[Madman1209]

Hi,

Suche benutzen! Bitte sehr

VG,
Mad

 

[d2boxSteve]

Hast du denn gelesen was unter der Tabelle steht?

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Diese jQuery Bibliothek die genau das macht kannst du auf der Webseite kaufen um selbst sowas darzustellen.

 

[Madman1209]

Hi,

@d2boxSteve

jQuery DataTables ist kostenlos, da wird nichts gekauft. Und was es ist weiß der TE, es geht lediglich um Beispiele für bestimmte Funktionen!

VG,
Mad

 

[d2boxSteve]

Naja, unten links steht "Purchase" ...

 

[Madman1209]

Hi,

na dann kann man dir nur deine eigene Frage stellen: Hast du denn gelesen was auf der Seite steht?

In der Überschirft steht groß und breit "FREE". Und unter "Purchase" steht als erstes

DataTables is free open source software, available under the MIT license, and you are free to download it and use as you see fit.

VG,
Mad

 

[d2boxSteve]

Zugegeben: das free hab ich übersehen und auf purchase nicht geklickt ...
Ich war gedanklich wohl bei den DataTables von C#.

 

[Dsimon24]

Sorry, mir war nicht ganz klar, nach was ich da am besten suchen sollte - danke dir!

Irgendwie steige ich da noch nicht so recht durch. Gibt´s da mglw. auch eine Mög-
lichkeit, das ohne JS und AJAX zu realisieren? Ich fülle dieStandard-Tabelle gerade
mittels einer Foreach-Schleife (PHP). Ich möchte quasi nur diese Art 'Schublade'
realisieren.

Sorry, für das Unwissen Hätt´ja einfach sein können

 

[Madman1209]

Hi,

in wie fern "ohne JS"? Das ist ein jQuery Addon - das basiert auf JS! Du brauchst JS ja schon für die Initialisierung! Oder was meinst du genau?

Wie genau "füllst du die Standard-Tabelle per PHP"? Vorbefüllt? Warum nicht einfach die Datenbefüllung in einen Controller und dann per AJAX die Daten geholt?

VG,
Mad

 

[Dsimon24]

Ich wollte am Script eigentlich möglichst wenig anpassen.
Ziel soll es sein, dass aus der Tabelle die letzten beiden
Spalten quasi in die 'Schublade' verschoben werden.

So sieht meine Tabele aus, die ich mittels der foreach-Schleife befülle:

    <table id="table_id" class="display">
        <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
        </thead>
        <tbody>
            <?php foreach ($x as $y) { ?>
                <tr>
                    <td><?= $y['id'] ?></td>
                    <td><?= $y['id'] ?></td>
                    <td><?= $y['id'] ?></td>
                    <td><?= $y['id'] ?></td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

Bisschen Javascript dazu:

$(document).ready( function () { $('#table_id').dataTable( { "columnDefs": [ { "type": "numeric", targets: 0 } ] } ); } );

So funktioniert das Ganze nun bei mir mit der Anzeige aller Daten.
Eingebunden habe ich notwendige Dateien natürlich ebenfalls.

Ziel soll es sein, die letzten beiden Spalten in die 'Schublade' zu integrieren
und diese per Klick auf ein Plus am Anfang der jeweiligen Zeile öffnen zu können.
Mehr habe ich nicht vor. Lässt sich das auf recht einfachem Wege realisieren?

 

[abcddcba]

ich verstehe nicht was du jetzt nicht schaffst? In dem Example ist doch alles drin oder nicht?
https://datatables.net/examples/api/row_details.html
In der format Methode gibst du halt den Inhalt von den Details an. Was ist jetzt nicht richtig?

 

[Dsimon24]

Da geht´s aber von AJAX aus. Wie mache ich das, wenn ich
die Felder mittels einer foreach-Schleife (PHP) befülle?

 

[Tokolosh]

Du weißt anscheinend nicht was AJAX macht. Die Daten kommen von der Serverseite. Wie soll Javascript da sonst rankommen?

Du schickst einen AJAX-Request an dein Banckend. In deinem Fall ein PHP Script und dieses liefert die Daten und schickt sie in Form von JSON wieder an das Frontend zurück.

 

[RalphS]

Wo holt ihr denn alle AJAX her?!

Es geht ums Ein- und Ausblenden von Tabellenzeilen. Die sind schon statisch da, durch PHP auf den Browser geschrieben.

Was fehlt ist CSS und ein bißchen JS fürs Eventhandling. Kann man mit jQuery machen, aber geht natürlich auch anders.

Wobei ich mich auch frage, was das o.a. Fragment tatsächlich ausgeben soll... 😕

Vorgehensweise:
- Unter #display tr:first-child sichtbar lassen und alle anderen ausblenden. Oder alternativ einfach #display > tbody > tr ausblenden (display:none).

- Dann mit JS einen Eventhandler auf den Tabellenheader setzen, oder wegen mir auch auf eine beliebige Grafik.

- Und der toggelt das dann. Mit JQ reicht einfach .toggle(). Ansonsten halt aktuellen display-Status befragen und dann umschalten auf "" wenn none bzw none wenn "".

- JQ macht noch Animationen drauf, wenn man das will mit .animate() oder sowas, aber das ist dann schon ein bißchen arg weit.

AJAX kann man machen, muß man aber natürlich nicht. Die Inhalte muß man ja sowieso besorgen. Der einzige Unterschied mit AJAX wäre, daß man die Tabelle mit document.ready() nicht anfassen muß (leer lassen kann) und erst die Daten holt, wenn sie jemand haben will (auf den "Anzeigen"-Button klickt). Das ist aber alles.

 

[Madman1209]

Hi,

AJAX ist bei jQuery DataTables aber halt best practice, daher wird es auch in jedem Beispiel verwendet. Und daher empfehlen wir das eben auch, damit es für den TE einfacher umzusetzen ist!

Klar kann man jetzt alles von Hand machen - wenn es das Ganze aber schon fertig gibt rate ich dringend davon ab, das Rad neu zu erfinden.

VG,
Mad