Nombre | Apellido | Años | Cumpleaños |
---|---|---|---|
Tatyana | Thrash | 64 | 15 Feb 1960 |
Keven | Keniston | 20 | 23 Dec 2003 |
Faviola | Frankum | 96 | 26 Sep 1927 |
Suzan | Sweetman | 53 | 10 Jul 1971 |
Demetrius | Derosia | 31 | 13 Dec 1992 |
Leo | Lupo | 64 | 21 May 1960 |
Merlene | Mach | 105 | 2 Aug 1919 |
Nikki | Nath | 77 | 30 Nov 1946 |
Almeta | Acosta | 30 | 9 Jul 1994 |
Ferne | Fizer | 76 | 18 May 1948 |
Jennie | Jamieson | 34 | 11 Apr 1990 |
Isa | Isakson | 102 | 29 Oct 1921 |
Lakeesha | Lovell | 100 | 31 Jul 1924 |
Nyla | Niemiec | 27 | 15 Sep 1996 |
Sheron | Schmitmeyer | 57 | 22 Aug 1967 |
Elfrieda | Eguia | 78 | 20 Nov 1945 |
Stefany | Sheffey | 68 | 30 Nov 1955 |
Sudie | Suiter | 53 | 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 | 83 | 21 Oct 1940 |
Osvaldo | Okane | 54 | 13 Jul 1970 |
Aurora | Archibald | 29 | 24 Dec 1994 |
Carina | Corby | 66 | 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 | 45 | 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 |
El primer parámetro que se pasa a smpSortableTable()
es la estructura de datos que contiene los datos de la tabla. Si desea utilizar los datos de la tabla en su lugar, este parámetro puede ser omitido o false
. (Ver ejemplos a continuación)
El segundo parámetro es el número máximo de filas para mostrar. Si se omite, la cantidad máxima de filas predeterminada será 10.
La localización puede establecerse utilizando un tercer parámetro opcional. Actualmente, se admiten inglés ("en"
), español ("es"
), portugués ("pt"
) y símbolos ("symbols"
).
La tabla es opcionalmente sensible para pantallas más estrechas que 768px
. En este ancho, las celdas de la tabla colapsarán en líneas individuales, con el prefijo del texto del encabezado de la columna. Los encabezados de columna se mostrarán como botones en la parte superior de la tabla. A 450px
, los botones de navegación en la parte inferior de la tabla también colapsarán en sus propias líneas.
La capacidad de respuesta, así como otras opciones, se puede establecer en el parámetro de configuración opcional.
<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>