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