The Perl Toolchain Summit needs more sponsors. If your company depends on Perl, please support this very important event.
 / 
Prty-1.092
River stage zero No dependents
++
/ Prty::JQuery::DataTable

NAME

Prty::JQuery::DataTable - Erzeuge eine jQuery DataTables-Tabelle

BASE CLASS

Prty::Hash

DESCRIPTION

Hompage DataTables-Plugin: https://datatables.net/

Die Klasse erzeugt den HTML- und JavaScript-Code für DataTable-Widgets.

ATTRIBUTES

class => $class (Default: undef)

CSS-Klasse der DataTable (des Table-Elements).

columns => \@columns (Default: [])

Spezifikation der Kolumnen. Jeder Eintrag ist ein Hash mit den Komponenten:

    {
        name=>$name,
        title=>$title,
        align=>'left'|'center'|'right',
        orderable=>$bool,
        searchable=>$bool,
        visible=>$bool,
    }

Nicht benötigte Komponenten können weggelassen werden, es gilt dann der Defaultwert.

id => $id (Default: undef)

DOM-Id der DataTable (des Table-Elements).

instantiate => $bool (Default: 0)

Füge die Instantiierung des DataTable-Objektes (JavaScript) zum HTML-Code der Methode html() hinzu.

json => $json (Default: undef)

JSON-Code der das DataTable-Objekt in JavaScript instantiiert. Die äußeren geschweiften Klammern werden hierbei weggelassen. Die Kolumnendefinitionen (DataTables-Attribut columns:) wird intern generiert und zu diesem Code hinzugefügt.

rowCallback => $sub (Default: s.u.)

Referenz auf eine Subroutine, die für jedes Row-Objekt die darzustellende Zeileninformation (für tr- und td-Tag) liefert. Default:

    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);
    };
rows => \@rows (Default: [])

Liste der Row-Objekte. Für jedes Element wird die Callback-Methode (Attribut rowCallback) aufgerufen.

EXAMPLE

Das Programm

    my $tab = Prty::Database::Row::Object->makeTable(
        [qw/per_id per_vorname per_nachname per_geburtsdatum/],
        qw/1 Rudi Ratlos 1971-04-23/,
        qw/2 Erika Mustermann 1955-03-16/,
        qw/3 Harry Hirsch 1948-07-22/,
        qw/4 Susi Sorglos 1992-10-23/,
    );
    
    my $h = Prty::Html::Tag->new('html-5');
    
    my $dt = Prty::JQuery::DataTable->new(
        id=>'personTable',
        class=>'compact stripe hover cell-border',
        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,
        json=>q~
            paging: false,
            info: false,
            fixedHeader: true,
            stateSave: true,
            dom: 'ft',
            language: {
                search: 'Suche:',
                zeroRecords: 'Keine Daten',
            },
        ~
    );
    
    my $html = Prty::Html::Page->html($h,
        styleSheet=>Prty::JQuery::DataTable->stylesheetUrl,
        styleSheet=>q|
            body {
                font-family: sans-serif;
                font-size: 12px;
                color: black;
                background-color: white;
            }
        |,
        body=>$dt->html($h),
        javaScript=>[
            'https://code.jquery.com/jquery-1.10.2.js',
            Prty::JQuery::DataTable->pluginUrl,
            $dt->instantiate,
        ],
    );

erzeugt (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/t/dt/dt-1.10.11/datatables.min.css">
      <style type="text/css">
        body {
          font-family: sans-serif;
          font-size: 12px;
          color: black;
          background-color: white;
        }
      </style>
    </head>
    <body>
      <table id="personTable" class="compact stripe hover cell-border"
        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>Erika</td>
          <td>Mustermann</td>
          <td>1955-03-16</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Harry</td>
          <td>Hirsch</td>
          <td>1948-07-22</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Susi</td>
          <td>Sorglos</td>
          <td>1992-10-23</td>
        </tr>
      </tbody>
      </table>
      <script type="text/javascript"
        src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script type="text/javascript"
        src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js">
      </script>
      <script type="text/javascript">
        jQuery('#personTable').DataTable({
          paging: false,
          info: false,
          fixedHeader: true,
          stateSave: true,
          dom: 'ft',
          language: {
            search: 'Suche:',
            zeroRecords: 'Keine Daten',
          },
          columns: [
            {
              className: 'dt-right',
            },{
              className: 'dt-left',
            },{
              className: 'dt-left',
            },{
              className: 'dt-center',
            },
          ],
        });
      </script>
    </body>
    </html>

METHODS

Plugin-Code (Klassenmethoden)

stylesheetUrl() - URL der DataTables CSS-Definitionen

Synopsis

    $url = $class->stylesheetUrl;
    $url = $class->stylesheetUrl($config);

Description

Liefere den CDN URL der DataTables CSS-Definitionen.

Example

    Prty::JQuery::DataTable->stylesheetUrl;
    =>
    'https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.css'

pluginUrl() - URL des Plugin

Synopsis

    $url = $class->pluginUrl;
    $url = $class->pluginUrl($config);

Description

Liefere den CDN URL des DataTables Plugin.

Example

    Prty::JQuery::DataTable->pluginUrl;
    =>
    'https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js'

Konstruktor

new() - Instantiiere Objekt

Synopsis

    $obj = $class->new(@attVal);

Description

Instantiiere eine DataTable in Perl und liefere eine Referenz auf dieses Objekt zurück.

Code-Generierung

html() - Generiere HTML

Synopsis

    $html = $obj->html($h);
    $html = $class->html($h,@attVal);

Description

Generiere den HTML-Code des DataTable-Objekts und liefere diesen zurück. Als Klassenmethode gerufen, wird das Objekt intern mit den Attributen @attVal instantiiert.

instantiate() - Instantiiere Widget in JavaScript

Synopsis

    $javaScript = $e->instantiate;

Description

Liefere den JavaScript-Code, der das DataTables-Objekt in JavaScript instantiiert. Aufbau:

    jQuery('#ID').DataTable({
        <JSON-Code>,
        columns: [
            <Kolumnen-Definitionen>
        ]
    });

Hilfsmethoden

getColumns() - Liste der Kolumnendefinitionen

Synopsis

    @columns | $columns = $e->getColumns;

Description

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 Prty::Hash).

VERSION

1.092

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2016 Frank Seitz

LICENSE

This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.