Quiq::JQuery::DataTable - Erzeuge eine HTML/JavaScript DataTables-Tabelle
Quiq::Hash
Die Klasse liefert den HTML- und JavaScript-Code für ein DataTable-Widget. Hompage des DataTables-Plugin: https://datatables.net/
Attribute, die bei der Instantiierung des JavaScript DataTable-Objekts gesetzt werden, sind fett hervorgehoben:
Definiert die Bedienelemente der Tabelle. Siehe: https://datatables.net/reference/option/dom
Text, der angezeigt wird, wenn die Tabelle keine Daten enthält. Siehe (auch für weitere sprachabhängige Texte): https://datatables.net/reference/option/language
Zeige Information über den Tabelleninhalt an. Siehe: https://datatables.net/reference/option/info
JavaScript-Code der nach der Instantiierung des DataTable-Objektes hinzugefügt wird.
Initiale Sortierung der Tabelle. Siehe: https://datatables.net/reference/option/order
Hebe die Sortierkolumnen hervor. Siehe: https://datatables.net/reference/option/orderClasses
Schalte Paginierung ein. Siehe: https://datatables.net/reference/option/paging
Text, der vor dem Suchfeld angezeigt wird (falls vorhanden) Siehe (auch für weitere sprachabhängige Texte): https://datatables.net/reference/option/language
Text, der angezeigt wird, wenn die Suche keine Daten geliefert hat. Siehe (auch für weitere sprachabhängige Texte): https://datatables.net/reference/option/language
Referenz auf eine Liste mit Kolumnen-Spezifikationen. Eine einzelne Kolumnen-Spezifikation ist ein Hash mit den Komponenten:
{ name => $name, # interner Name, insbes. f. Wert-Lookup title => $title, # Kolumnenüberschrift type => $type, # DataTables-Kolumnentyp (s. Link unten) align => $align, # 'left'|'center'|'right' (Default: 'left') orderable => $bool, # 0|1 (Default: 1) searchable => $bool, # 0|1 (Default: 1) visible => $bool, # 0|1 (Default: 1) width => $width, # s. DtaTables Doku }
Nicht benötigte Komponenten können weggelassen werden.
Mögliche Werte für $type: 'date', 'num', 'num-fmt', 'html-num', 'html-num-fmt', 'html', 'string'. Siehe https://datatables.net/reference/option/columns.type
Erlaube HTML insgesamt oder auf den Kolumnen in @titles, d.h. ersetze die Werte der Kolumnen &, <, > nicht automatisch durch HTML-Entities.
order-column") CSS-Klasse der DataTable (des Table-Elements).
Aktiviere FixedHeader. In dem Fall müssen zusätzlich die FixedHrader CSS- und JS-Resourcen geladen werden.
Setze die Titel auch als Footer.
DOM-Id der DataTable (des Table-Elements).
Die Row-Objekte sind einfache Arrays. Als rowCallback wird (per Default) verwendet:
rowCallback => sub { my ($row,$i,$columnA) = @_; return (undef,@$row); }
Wenn nicht gesetzt, wird (per Default) als rowCallback verwendet:
rowCallback => sub { my ($row,$i,$columnA) = @_; my @arr; for my $col (@$columnA) { my $name = $col->name; push @arr,$name? $row->get($name): undef; } return (undef,@arr); };
Referenz auf eine Subroutine, die für jedes Row-Objekt die darzustellende Zeileninformation (für tr- und td-Tag) liefert (siehe Quiq::Html::Table::List). Der Default hängt vom Wert des Attributs rowsAreArrays ab. Siehe dort.
Liste der Row-Objekte. Für jedes Element wird die Callback-Methode (Attribut rowCallback) aufgerufen.
Default-Aussehen einer DataTable:
Das Programm
my $h = Quiq::Html::Producer->new; my $tab = Quiq::Database::Row::Object->makeTable( [qw/per_id per_vorname per_nachname per_geburtsdatum/], qw/1 Rudi Ratlos 1971-04-23/, qw/2 Harry Hirsch 1948-07-22/, qw/3 Susi Sorglos 1992-10-23/, qw/4 Axel Nässe 1985-04-05/, ); my $html = Quiq::Html::Page->html($h, load => [ 'https://code.jquery.com/jquery-latest.min.js', 'https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.css', 'https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.js', ], styleSheet => q~ body { font-family: sans-serif; font-size: 12pt; max-width: 500px; } ~, body => Quiq::JQuery::DataTable->html($h, id => 'personTable', order => [[2,'asc']], columns => [ { name => 'per_id', title => 'Id', align => 'right', },{ name => 'per_vorname', title => 'Vorname', },{ name => 'per_nachname', title => 'Nachname', },{ name => 'per_geburtsdatum', title => 'Geburtstag', align => 'center', }, ], rows => scalar $tab->rows, ), );
erzeugt den HTML-Code (lange Zeilen umbrochen)
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.js"> </script> <style type="text/css"> body { font-family: sans-serif; font-size: 12pt; max-width: 500px; } </style> </head> <body> <table class="compact stripe hover cell-border nowrap order-column" id="personTable" cellspacing="0"> <thead> <tr> <th>Id</th> <th>Vorname</th> <th>Nachname</th> <th>Geburtstag</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Rudi</td> <td>Ratlos</td> <td>1971-04-23</td> </tr> <tr> <td>2</td> <td>Harry</td> <td>Hirsch</td> <td>1948-07-22</td> </tr> <tr> <td>3</td> <td>Susi</td> <td>Sorglos</td> <td>1992-10-23</td> </tr> <tr> <td>4</td> <td>Axel</td> <td>Nässe</td> <td>1985-04-05</td> </tr> </tbody> </table> <script type="text/javascript"> var dt = $('#personTable').DataTable({ dom: 't', info: false, order: [[2,'asc']], orderClasses: true, paging: false, columns: [{className:'dt-right'},{className:'dt-left'},{className:'dt-left'},{className:'dt-center'}], }); $('#personTable').show(); </script> </body> </html>
$obj = $class->new(@keyVal);
Instantiiere eine DataTable in Perl und liefere eine Referenz auf dieses Objekt zurück.
$html = $obj->html($h); $html = $class->html($h,@keyVal);
Generiere den HTML-Code des DataTable-Objekts und liefere diesen zurück. Als Klassenmethode gerufen, wird das Objekt intern mit den Attributen @keyVal instantiiert.
@columns | $columns = $e->getColumns;
Liefere die Liste der Kolumnendefinitionen. Die Kolumnen werden beim Setzen des Objektattributs columns als einfache Hashes angegeben. Diese Methode liefert die Kolumnen-Definitionen als Hash-Objekte (vom Typ Quiq::Hash).
$javaScript = $e->instantiate;
Liefere den JavaScript-Code, der das DataTables-Objekt in JavaScript instantiiert. Aufbau:
jQuery('#ID').DataTable({ <JSON-Code>, columns: [ <Kolumnen-Definitionen> ] });
1.215
Frank Seitz, http://fseitz.de/
Copyright (C) 2024 Frank Seitz
This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.
To install Quiq, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Quiq
CPAN shell
perl -MCPAN -e shell install Quiq
For more information on module installation, please visit the detailed CPAN module installation guide.