SMP Sortierbare Tabelle jQuery Plugin

Auf GitHub anzeigen

Vorname	Nachname	Alter	Geburtstag
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

Anzahl der Reihen

Sprache auswählen

Reagierend Staatsbürgerlich

Wie benutzt man

Der erste Parameter, der an smpSortableTable() übergeben wird, ist die Datenstruktur, die die Tabellendaten enthält. Wenn Sie stattdessen die Daten aus der Tabelle verwenden möchten, kann dieser Parameter weggelassen oder false sein. (Siehe Beispiele unten.)

Der zweite Parameter ist die maximale Anzahl der anzuzeigenden Zeilen. Wenn nicht angegeben, wird die maximale Anzahl von Zeilen standardmäßig auf 10 festgelegt.

Die Lokalisierung kann unter Verwendung eines optionalen dritten Parameters eingestellt werden. Derzeit werden Englisch ("en"), Spanisch ("es"), Portugiesisch ("pt") und Symbole ("symbols") unterstützt.

Der Tisch reagiert optional auf Bildschirme, die schmaler als 768px sind. Bei dieser Breite werden Tabellenzellen auf einzelne Zeilen reduziert, denen der Spaltenkopftext vorangestellt ist. Spaltenüberschriften werden als Schaltflächen am oberen Rand der Tabelle angezeigt. Bei 450px werden die Navigationsschaltflächen am unteren Rand der Tabelle auch auf ihre eigenen Linien zusammenfallen.

Die Reaktionsfähigkeit sowie andere Optionen können im Parameter für optionale Einstellungen festgelegt werden.

Datenstruktur

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

Tabellendaten

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