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 65 15 Feb 1960
Keven Keniston 21 23 Dec 2003
Faviola Frankum 98 26 Sep 1927
Suzan Sweetman 54 10 Jul 1971
Demetrius Derosia 32 13 Dec 1992
Leo Lupo 65 21 May 1960
Merlene Mach 106 2 Aug 1919
Nikki Nath 78 30 Nov 1946
Almeta Acosta 31 9 Jul 1994
Ferne Fizer 77 18 May 1948
Jennie Jamieson 35 11 Apr 1990
Isa Isakson 103 29 Oct 1921
Lakeesha Lovell 101 31 Jul 1924
Nyla Niemiec 29 15 Sep 1996
Sheron Schmitmeyer 58 22 Aug 1967
Elfrieda Eguia 79 20 Nov 1945
Stefany Sheffey 69 30 Nov 1955
Sudie Suiter 55 25 Sep 1970
Tristan Townsley 31 8 May 1994
Keitha Kellen 48 9 Jun 1977
Virgil Victorino 37 23 Jun 1988
Marvin Mcfate 51 20 Jun 1974
Trang Tony 43 4 Jun 1982
Lecia Luong 59 22 Jul 1966
Lon Leung 72 14 Feb 1953
Adah Abell 104 22 May 1921
Estefana Ecklund 101 9 Feb 1924
Simonne Strauch 85 21 Oct 1940
Osvaldo Okane 55 13 Jul 1970
Aurora Archibald 30 24 Dec 1994
Carina Corby 68 21 Oct 1957
Garth Garr 65 29 Jun 1960
Jayna Jacobs 87 12 Aug 1938
Rhoda Rountree 33 29 Jan 1992
Jacquelin Jaco 49 15 May 1976
Deangelo Dressel 48 3 Apr 1977
Man Manalo 95 21 Aug 1930
Violet Vanzant 85 16 May 1940
Jc Joesph 50 20 Feb 1975
Thomasine Tripodi 87 1 Sep 1938
Crissy Collins 59 12 Jun 1966
Jeffry Jolly 83 22 Jun 1942
Donnetta Ducharme 106 10 May 1919
Kayleen Keehn 84 12 Jul 1941
Shirleen Sanford 46 22 Nov 1978
Clora Curlin 60 20 Apr 1965
Cecille Creed 72 24 Jan 1953
Normand Nolen 93 30 Jan 1932
Horacio Hazelrigg 79 1 Jul 1946
Eloisa Eisenberg 26 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": 100,
        "bdate": {
            "text": "9 Apr 1925", 
            "sort": -1411540671
        }
    }, {
        "fname": "Karin",
        "lname": "Book",
        "age": 40,
        "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>65</td>
            <td data-smp-sort="-311713200">15 Feb 1960</td>
        </tr>
        <tr>
            <td>Keven</td>
            <td>Keniston</td>
            <td>21</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