# Tabellen

## Listing Table

Das Tabellen-Modul enthält schon `.wrapper`-Klassen, um die unterschiedliche Einrückung umzusetzen. Es sollte daher dirket in `<main>` platziert werden.

Benutzt auf 08.ticket-listing.html.

Anzeigen
Einträge

| Name Firma Kartennummer | Firma | Karten-Nr. |  | Erstellt | E-Mail | Status
--- | --- | --- | --- | --- | --- | --- | ---
| Küster, Daniel Vitra AG 1234567890123 | Vitra AG | 1234567890123 |  | 10.03.2016 | daniel.kuester@vitra.ch |
| Schnarrenhäuser-Leutberger, Basine Samba Caracho GbR 2345678901234 | Samba Caracho GbR | 2345678901234 |  | 10.03.2016 | basine.schnarrenhaeuser-leutberger@samba-caracho.com |
| Mütterchen, Steve Vitra AG 2345678901235 | Vitra AG | 2345678901235 |  | 10.03.2016 | steve.muetterchen@vitra.ch |

Anzeigen
Einträge
3 von 3 Tickets

- 1
- 2
- 3

Tickets erstellen
Nach oben

    <!-- src/frontend/templates/modules/listing-table.twig -->
    <form action="../dummy/php/proxy.php" method="post" name="listing-table">

        <div class="wrapper">
            <div class="table-actions is-clearfix">
                <div class="table-action-search">

    <!-- src/frontend/templates/controls/search.twig -->
    <fieldset>
        <div class="search is-clearfix">
            <button type="submit" class="button-search bg-color-event">
                <span class="icon icon-magnifier"></span>
                <span class="text">Suche</span>
            </button>
            <input type="text" value="" name="search" />
        </div>
    </fieldset>

                </div>
                <div class="table-action-select">

                </div>
            </div>
        </div>

        <div class="wrapper table-wrapper">
            <div class="listing-table-header">
                <div class="columns is-clearfix">
                    <div class="column is-third-tablet is-third-desktop select-filter color-event">

    <!-- src/frontend/templates/elements/controls/select.twig -->
    <fieldset>

            <label>Anzeigen</label>

        <select name="filter-results-2" class=" submit-on-change select2 basic-select" data-msg-noresults="Keine Einträge gefunden">

                <option value="all-tickets">
                    Alle Tickets
                </option>

                <option value="personalized-tickets">
                    Personalisierte Tickets
                </option>

                <option value="sent-tickets">
                    Verschickte Tickets
                </option>

        </select>

    </fieldset>

                    </div>
                    <div class="column is-third-tablet is-third-desktop text-center select-filter color-event">

    <!-- src/frontend/templates/elements/controls/select.twig -->
    <fieldset>

        <select name="table-actions" class=" submit-on-change select2 basic-select" placeholder="Aktion" data-msg-noresults="Keine Einträge gefunden">

                <option value="">

                </option>

                <option value="download-contacts">
                    Kontakte herunterladen
                </option>

                <option value="download-pdf">
                    PDF Tickets herunterladen
                </option>

                <option value="download-wallet">
                    Wallet Tickets herunterladen
                </option>

                <option value="toggle-alert">
                    Benachrichtigung bei Messebesuch
                </option>

        </select>

    </fieldset>

                    </div>
                    <div class="column  is-third-tablet is-third-desktop text-right is-hidden-phone select-entries color-event">

    <!-- src/frontend/templates/elements/controls/select.twig -->
    <fieldset>

            <label>Einträge</label>

        <select name="number-of-entries-2" class=" select2 basic-select" data-msg-noresults="Keine Einträge gefunden">

                <option value="02.05.tables.html#num-entries-10">
                    10
                </option>

                <option value="02.05.tables.html#num-entries-25">
                    25
                </option>

                <option value="02.05.tables.html#num-entries-50">
                    50
                </option>

                <option value="02.05.tables.html#num-entries-100">
                    100
                </option>

        </select>

    </fieldset>

                    </div>
                </div>
            </div>
            <div class="scroll-wrapper">
                <div class="scroll-duplicate" data-target-class="listing-table"></div>
            </div>
            <div class="responsive-table">
                <table class="listing-table">
                    <thead>
                        <tr>

                                <th class="checkbox">

    <!-- src/frontend/templates/elements/controls/checkbox.twig -->

    <fieldset class="atp-checkbox toggle-listing-checkboxes">
        <input type="checkbox" name="toggle-checkboxes" id="toggle-checkboxes" value="" />
        <label for="toggle-checkboxes" class="toggle-listing-checkboxes" >

        </label>

    </fieldset>

                                </th>

                                <th>

                                        <a href="#sort" class="color-event color-event-darker-hover">
                                            Name

                                                <span class="mobile-only">
                                                    Firma<br />Kartennummer
                                                </span>

                                        </a>

                                </th>

                                <th>

                                        <a href="#sort" class="color-event color-event-darker-hover">
                                            Firma

                                        </a>

                                </th>

                                <th>

                                        <a href="#sort" class="color-event color-event-darker-hover">
                                            Karten-Nr.

                                        </a>

                                </th>

                                <th>

                                        <a href="#sort" class="color-event color-event-darker-hover">

                                        </a>

                                </th>

                                <th>

                                        <a href="#sort" class="color-event color-event-darker-hover">
                                            Erstellt

                                                    <span class="icon icon-sort-desc"></span>

                                        </a>

                                </th>

                                <th>

                                        <a href="#sort" class="color-event color-event-darker-hover">
                                            E-Mail

                                        </a>

                                </th>

                                <th>

                                        <a href="#sort" class="color-event color-event-darker-hover">
                                            Status

                                        </a>

                                </th>

                        </tr>
                    </thead>
                    <tbody>

                            <tr >

                                        <td class="input-cell ">

    <!-- src/frontend/templates/elements/controls/checkbox.twig -->

    <fieldset class="atp-checkbox">
        <input type="checkbox" name="card-1234567890123" id="card-1234567890123" value="1" />
        <label for="card-1234567890123">

        </label>

    </fieldset>

                                        </td>

                                        <td class="text-cell ">

                                                <a href="" class="color-default color-event-hover">
                                                    Küster, Daniel

                                                        <span class="mobile-only">
                                                            Vitra AG<br />1234567890123
                                                        </span>

                                                </a>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        Vitra AG
                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        1234567890123
                                                    </span>

                                        </td>

                                        <td class="icon-cell is-hidden-phone is-hidden-tablet">

                                                    <span>

                                                            <span class="icon icon-link"></span>

                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone is-hidden-tablet">

                                                    <span>
                                                        10.03.2016
                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        daniel.kuester@vitra.ch
                                                    </span>

                                        </td>

                                        <td class="icon-cell ">

                                                    <span>

                                                            <span class="icon icon-user"></span>

                                                    </span>

                                        </td>

                            </tr>

                            <tr >

                                        <td class="input-cell ">

    <!-- src/frontend/templates/elements/controls/checkbox.twig -->

    <fieldset class="atp-checkbox">
        <input type="checkbox" name="card-2345678901234" id="card-2345678901234" value="1" />
        <label for="card-2345678901234">

        </label>

    </fieldset>

                                        </td>

                                        <td class="text-cell ">

                                                <a href="" class="color-default color-event-hover">
                                                    Schnarrenhäuser-Leutberger, Basine

                                                        <span class="mobile-only">
                                                            Samba Caracho GbR<br />2345678901234
                                                        </span>

                                                </a>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        Samba Caracho GbR
                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        2345678901234
                                                    </span>

                                        </td>

                                        <td class="icon-cell is-hidden-phone is-hidden-tablet">

                                                    <span>

                                                            <span class="icon icon-ticket"></span>

                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone is-hidden-tablet">

                                                    <span>
                                                        10.03.2016
                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        basine.schnarrenhaeuser-leutberger@samba-caracho.com
                                                    </span>

                                        </td>

                                        <td class="icon-cell ">

                                                    <span>

                                                            <span class="icon icon-email"></span>

                                                    </span>

                                        </td>

                            </tr>

                            <tr >

                                        <td class="input-cell ">

    <!-- src/frontend/templates/elements/controls/checkbox.twig -->

    <fieldset class="atp-checkbox">
        <input type="checkbox" name="card-2345678901235" id="card-2345678901235" value="1" />
        <label for="card-2345678901235">

        </label>

    </fieldset>

                                        </td>

                                        <td class="text-cell ">

                                                <a href="" class="color-default color-event-hover">
                                                    Mütterchen, Steve

                                                        <span class="mobile-only">
                                                            Vitra AG<br />2345678901235
                                                        </span>

                                                </a>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        Vitra AG
                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        2345678901235
                                                    </span>

                                        </td>

                                        <td class="icon-cell is-hidden-phone is-hidden-tablet">

                                                    <span>

                                                            <span class="icon icon-ticket"></span>

                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone is-hidden-tablet">

                                                    <span>
                                                        10.03.2016
                                                    </span>

                                        </td>

                                        <td class="text-cell is-hidden-phone">

                                                    <span>
                                                        steve.muetterchen@vitra.ch
                                                    </span>

                                        </td>

                                        <td class="icon-cell ">

                                                    <span>

                                                            <span class="icon icon-email"></span>

                                                    </span>

                                        </td>

                            </tr>

                    </tbody>
                </table>
            </div>

            <div class="listing-table-header">
                <div class="columns is-clearfix">
                    <div class="column is-third-tablet is-third-desktop is-hidden-phone select-filter color-event">

    <!-- src/frontend/templates/elements/controls/select.twig -->
    <fieldset>

            <label>Anzeigen</label>

        <select name="filter-results-2-2" class=" submit-on-change select2 basic-select" data-msg-noresults="Keine Einträge gefunden">

                <option value="all-tickets">
                    Alle Tickets
                </option>

                <option value="personalized-tickets">
                    Personalisierte Tickets
                </option>

                <option value="sent-tickets">
                    Verschickte Tickets
                </option>

        </select>

    </fieldset>

                    </div>
                    <div class="column is-third-tablet is-third-desktop text-center is-hidden-phone select-filter color-event">

    <!-- src/frontend/templates/elements/controls/select.twig -->
    <fieldset>

        <select name="table-actions" class=" submit-on-change select2 basic-select" placeholder="Aktion" data-msg-noresults="Keine Einträge gefunden">

                <option value="">

                </option>

                <option value="download-contacts">
                    Kontakte herunterladen
                </option>

                <option value="download-pdf">
                    PDF Tickets herunterladen
                </option>

                <option value="download-wallet">
                    Wallet Tickets herunterladen
                </option>

                <option value="toggle-alert">
                    Benachrichtigung bei Messebesuch
                </option>

        </select>

    </fieldset>

                    </div>
                    <div class="column is-third-tablet is-third-desktop text-right is-hidden-phone select-entries color-event">

    <!-- src/frontend/templates/elements/controls/select.twig -->
    <fieldset>

            <label>Einträge</label>

        <select name="number-of-entries-2-2" class=" select2 basic-select" data-msg-noresults="Keine Einträge gefunden">

                <option value="02.05.tables.html#num-entries-10">
                    10
                </option>

                <option value="02.05.tables.html#num-entries-25">
                    25
                </option>

                <option value="02.05.tables.html#num-entries-50">
                    50
                </option>

                <option value="02.05.tables.html#num-entries-100">
                    100
                </option>

        </select>

    </fieldset>

                    </div>
                    <div class="column text-center color-light">
                        <span class="table-num-entries">
                            3 von 3 Tickets
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper">
            <div class="listing-table-pager">

    <!-- src/frontend/templates/modules/pager.twig -->

    <div class="pager">
        <ul class="color-light">
            <li class="prev">

                    <span class="icon icon-arrow-left color-light"></span>

            </li>

                    <li>

                            <a href="02.05.tables.html#page-1" class="color-event color-event-darker-hover">1</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-2" class="color-light color-light-darker-hover">2</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-3" class="color-light color-light-darker-hover">3</a>

                    </li>

            <li class="next">

                    <a href="02.05.tables.html#page-next" class="color-light color-light-darker-hover"><span class="icon icon-arrow-right"></span></a>

            </li>
        </ul>
    </div>

            </div>

            <div class="listing-table-extras columns is-clearfix">
                <div class="column is-half-tablet is-half-desktop text-right float-right">

    <!-- src/frontend/templates/elements/buttons/button-brand.twig -->

    <a href="07.austellertickets-onboarding.html" class="button button-brand bg-color-event bg-color-event-darker-hover">

            <span class="icon ticket-tilted"> </span>

            <span>Tickets erstellen</span>

    </a>

                </div>
                <div class="column is-half-tablet is-half-desktop">
                    <a href="#top" class="button button-small color-default color-event-hover">
                        <span class="icon icon-arrow-up"></span>
                        <span>Nach oben</span>
                    </a>
                </div>
            </div>
        </div>
    </form>

## Pager

Der Pager zeigt Standardmäßig den ersten, letzten und ausgewählten Eintrag, sowie die zwei vorhergehenden und folgenden Einträge.

Benutzt auf 08.ticket-listing.html.

- 1
- 2
- 3
- 4
- 5
- …
- 10

    <!-- src/frontend/templates/modules/pager.twig -->

    <div class="pager">
        <ul class="color-light">
            <li class="prev">

                    <span class="icon icon-arrow-left color-light"></span>

            </li>

                    <li>

                            <a href="02.05.tables.html#page-1" class="color-event color-event-darker-hover">1</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-2" class="color-light color-light-darker-hover">2</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-3" class="color-light color-light-darker-hover">3</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-4" class="color-light color-light-darker-hover">4</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-5" class="color-light color-light-darker-hover">5</a>

                    </li>

                        <li>
                            <span>&hellip;</span>
                        </li>

                    <li>

                            <a href="02.05.tables.html#page-10" class="color-light color-light-darker-hover">10</a>

                    </li>

            <li class="next">

                    <a href="02.05.tables.html#page-next" class="color-light color-light-darker-hover"><span class="icon icon-arrow-right"></span></a>

            </li>
        </ul>
    </div>

## Pager

- 1
- …
- 3
- 4
- 5
- 6
- 7
- …
- 10

    <!-- src/frontend/templates/modules/pager.twig -->

    <div class="pager">
        <ul class="color-light">
            <li class="prev">

                    <a href="02.05.tables.html#page-prev" class="color-light color-light-darker-hover"><span class="icon icon-arrow-left"></span></a>

            </li>

                    <li>

                            <a href="02.05.tables.html#page-1" class="color-light color-light-darker-hover">1</a>

                    </li>

                        <li>
                            <span>&hellip;</span>
                        </li>

                    <li>

                            <a href="02.05.tables.html#page-3" class="color-light color-light-darker-hover">3</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-4" class="color-light color-light-darker-hover">4</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-5" class="color-event color-event-darker-hover">5</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-6" class="color-light color-light-darker-hover">6</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-7" class="color-light color-light-darker-hover">7</a>

                    </li>

                        <li>
                            <span>&hellip;</span>
                        </li>

                    <li>

                            <a href="02.05.tables.html#page-10" class="color-light color-light-darker-hover">10</a>

                    </li>

            <li class="next">

                    <a href="02.05.tables.html#page-next" class="color-light color-light-darker-hover"><span class="icon icon-arrow-right"></span></a>

            </li>
        </ul>
    </div>

## Pager

- 1
- …
- 6
- 7
- 8
- 9
- 10

    <!-- src/frontend/templates/modules/pager.twig -->

    <div class="pager">
        <ul class="color-light">
            <li class="prev">

                    <a href="02.05.tables.html#page-prev" class="color-light color-light-darker-hover"><span class="icon icon-arrow-left"></span></a>

            </li>

                    <li>

                            <a href="02.05.tables.html#page-1" class="color-light color-light-darker-hover">1</a>

                    </li>

                        <li>
                            <span>&hellip;</span>
                        </li>

                    <li>

                            <a href="02.05.tables.html#page-6" class="color-light color-light-darker-hover">6</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-7" class="color-light color-light-darker-hover">7</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-8" class="color-light color-light-darker-hover">8</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-9" class="color-event color-event-darker-hover">9</a>

                    </li>

                    <li>

                            <a href="02.05.tables.html#page-10" class="color-light color-light-darker-hover">10</a>

                    </li>

            <li class="next">

                    <a href="02.05.tables.html#page-next" class="color-light color-light-darker-hover"><span class="icon icon-arrow-right"></span></a>

            </li>
        </ul>
    </div>