Navegação
« »

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

SMP Tabela Ordenável jQuery Plugin

Ver no GitHub

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









Como usar

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.

Estrutura de dados

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

Dados da Tabela

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

Escreva um comentário