Navigation
« »

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

SMP Sortable Table jQuery Plugin

View on GitHub

First Name Last Name Age Birthday
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









How to Use

The first parameter passed to smpSortableTable() is the data structure containing the table data. If you would like to use the data from the table instead, this parameter may be omitted or false. (See examples below.)

The second parameter is the maximum number of rows to display. If omitted, the maximum number of rows will default to 10.

Localization may be set using an optional third parameter. Currently, English ("en"), Spanish ("es"), Portuguese ("pt"), and Symbols ("symbols") are supported. (Thanks Víctor)

The table is optionally responsive for screens narrower than 768px. At this width, table cells will collapse down onto individual lines, prefixed by the column header text. Column headers will display as buttons at the top of the table. At 450px, the navigation buttons at the bottom of the table will also collapse onto their own lines.

Responsiveness, as well as other options, can be set in the optional settings parameter.

Data Structure

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

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

Write a Comment