Navigation
« »

English | Español | Deutsch | Português | Cymraeg

SMP Sortierbare Tabelle jQuery Plugin

Auf GitHub anzeigen

Vorname Nachname Alter Geburtstag
Tatyana Thrash 64 15 Feb 1960
Keven Keniston 20 23 Dec 2003
Faviola Frankum 97 26 Sep 1927
Suzan Sweetman 53 10 Jul 1971
Demetrius Derosia 32 13 Dec 1992
Leo Lupo 64 21 May 1960
Merlene Mach 105 2 Aug 1919
Nikki Nath 78 30 Nov 1946
Almeta Acosta 30 9 Jul 1994
Ferne Fizer 76 18 May 1948
Jennie Jamieson 34 11 Apr 1990
Isa Isakson 103 29 Oct 1921
Lakeesha Lovell 100 31 Jul 1924
Nyla Niemiec 28 15 Sep 1996
Sheron Schmitmeyer 57 22 Aug 1967
Elfrieda Eguia 79 20 Nov 1945
Stefany Sheffey 69 30 Nov 1955
Sudie Suiter 54 25 Sep 1970
Tristan Townsley 30 8 May 1994
Keitha Kellen 47 9 Jun 1977
Virgil Victorino 36 23 Jun 1988
Marvin Mcfate 50 20 Jun 1974
Trang Tony 42 4 Jun 1982
Lecia Luong 58 22 Jul 1966
Lon Leung 71 14 Feb 1953
Adah Abell 103 22 May 1921
Estefana Ecklund 100 9 Feb 1924
Simonne Strauch 84 21 Oct 1940
Osvaldo Okane 54 13 Jul 1970
Aurora Archibald 29 24 Dec 1994
Carina Corby 67 21 Oct 1957
Garth Garr 64 29 Jun 1960
Jayna Jacobs 86 12 Aug 1938
Rhoda Rountree 32 29 Jan 1992
Jacquelin Jaco 48 15 May 1976
Deangelo Dressel 47 3 Apr 1977
Man Manalo 94 21 Aug 1930
Violet Vanzant 84 16 May 1940
Jc Joesph 49 20 Feb 1975
Thomasine Tripodi 86 1 Sep 1938
Crissy Collins 58 12 Jun 1966
Jeffry Jolly 82 22 Jun 1942
Donnetta Ducharme 105 10 May 1919
Kayleen Keehn 83 12 Jul 1941
Shirleen Sanford 46 22 Nov 1978
Clora Curlin 59 20 Apr 1965
Cecille Creed 71 24 Jan 1953
Normand Nolen 92 30 Jan 1932
Horacio Hazelrigg 78 1 Jul 1946
Eloisa Eisenberg 25 15 Dec 1998









Wie benutzt man

Der erste Parameter, der an smpSortableTable() übergeben wird, ist die Datenstruktur, die die Tabellendaten enthält. Wenn Sie stattdessen die Daten aus der Tabelle verwenden möchten, kann dieser Parameter weggelassen oder false sein. (Siehe Beispiele unten.)

Der zweite Parameter ist die maximale Anzahl der anzuzeigenden Zeilen. Wenn nicht angegeben, wird die maximale Anzahl von Zeilen standardmäßig auf 10 festgelegt.

Die Lokalisierung kann unter Verwendung eines optionalen dritten Parameters eingestellt werden. Derzeit werden Englisch ("en"), Spanisch ("es"), Portugiesisch ("pt") und Symbole ("symbols") unterstützt.

Der Tisch reagiert optional auf Bildschirme, die schmaler als 768px sind. Bei dieser Breite werden Tabellenzellen auf einzelne Zeilen reduziert, denen der Spaltenkopftext vorangestellt ist. Spaltenüberschriften werden als Schaltflächen am oberen Rand der Tabelle angezeigt. Bei 450px werden die Navigationsschaltflächen am unteren Rand der Tabelle auch auf ihre eigenen Linien zusammenfallen.

Die Reaktionsfähigkeit sowie andere Optionen können im Parameter für optionale Einstellungen festgelegt werden.

Datenstruktur

<table id="people-table">
    <thead>
        <tr>
            <th id="fname">First Name</th>
            <th id="lname">Last Name</th>
            <th id="age" class="smp-not-sortable">Age</th>
            <th id="bdate">Birthday</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

...

<script type="text/javascript">
    const people = [{
        "fname": "Tanner",
        "lname": "Conner",
        "age": 99,
        "bdate": {
            "text": "9 Apr 1925", 
            "sort": -1411540671
        }
    }, {
        "fname": "Karin",
        "lname": "Book",
        "age": 39,
        "bdate": {
            "text": "21 Jan 1985", 
            "sort": 475176129
        }
    }, { 
        ... 
    }] ;
    
    let rows = 10 ;
    let language = "en" ;
    let settings = {
        responsive: true,  // Make table responsive at 768px (default: true)
        stateful:   true,  // Whether to track table state in URL (default: true)
        emptyCell:  "N/A", // Text to display in empty cells (default: "N/A")
        tr: {
            class:"some-class" // Additional row class(es)
        },
        td: {
            class:"some-other-class" // Additional cell class(es)
        }
    } ;
    
    $('#people-table').smpSortableTable(people, rows, language, settings);
</script>

Tabellendaten

<table id="people-table">
    <thead>
        <tr>
            <th id="fname">First Name</th>
            <th id="lname">Last Name</th>
            <th id="age" class="smp-not-sortable">Age</th>
            <th id="bdate">Birthday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tatyana</td>
            <td>Thrash</td>
            <td>64</td>
            <td data-smp-sort="-311713200">15 Feb 1960</td>
        </tr>
        <tr>
            <td>Keven</td>
            <td>Keniston</td>
            <td>20</td>
            <td data-smp-sort="1072155600">23 Dec 2003</td>
        </tr>
        <tr>
            ...
        </tr>
    </tbody>
</table>

...

<script type="text/javascript">
    let rows = 10 ;
    let language = "en" ;
    let settings = {
        responsive: true,  // Make table responsive at 768px (default: true)
        stateful:   true,  // Whether to track table state in URL (default: true)
        emptyCell:  "N/A", // Text to display in empty cells (default: "N/A")
        tr: {
            class:"some-class" // Additional row class(es)
        },
        td: {
            class:"some-other-class" // Additional cell class(es)
        }
    } ;
    
    $('#people-table').smpSortableTable(false, rows, language, settings);
</script>

Schreibe einen Kommentar