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.

 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
3 von 3 Tickets
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.


                
<!-- 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


                
<!-- 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


                
<!-- 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>