Navegación
« »

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

SMP Complemento jQuery de tabla ordenable

Ver en GitHub

Nombre Apellido Años Cumpleaños
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









Cómo utilizar

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.

Estructura de datos

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

Datos de tabla

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

Escribir un comentario