Nome | Último nome | Era | Aniversário |
---|---|---|---|
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 |
O primeiro parâmetro passado para smpSortableTable()
é a estrutura de dados que contém os dados da tabela. Se você gostaria de usar os dados da tabela, este parâmetro pode ser omitido ou false
. (Veja os exemplos abaixo)
O segundo parâmetro é o número máximo de linhas a serem exibidas. Se omitido, o número máximo de linhas será padronizado para 10.
A localização pode ser definida usando um terceiro parâmetro opcional. Atualmente, inglês ("en"
), espanhol ("es"
), português ("pt"
) e símbolos ("symbols"
) são suportados.
A tabela é opcionalmente responsiva para telas mais estreitas que 768px
. Nesta largura, as células da tabela serão recolhidas em linhas individuais, prefixadas pelo texto do cabeçalho da coluna. Cabeçalhos de coluna serão exibidos como botões na parte superior da tabela. A 450px
, os botões de navegação na parte inferior da tabela também se acumulam em suas próprias linhas.
A capacidade de resposta, bem como outras opções, pode ser definida no parâmetro de configurações opcionais.
<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>