Basic usage
The below example makes the table with the id attribute value of example-1 sortable using the default options and styling provided by the default stylesheet (sortable.css).
sortable('#example-1');
| ID | First Name | Surname | Date of Birth | Email Address | Donation | Score | IP Address | Latitude | Longitude |
|---|---|---|---|---|---|---|---|---|---|
| 1875 | Colette | Stout | May 11, 1995 | neque.in.ornare@aol.com | 84.21 | 99% | 112.142.211.169 | 35.6895 | 139.6917 |
| 1965 | Colton | Cervantes | Jan 17, 1997 | adipiscing.elit@protonmail.org | 43.33 | 81% | 97.205.145.49 | 40.7128 | -74.0060 |
| 2175 | Colt | Lucas | Apr 30, 1995 | in@aol.com | 70.90 | 71% | 68.114.16.232 | 48.8566 | 2.3522 |
| 2378 | Vincent | Ruiz | Feb 15, 1994 | ac@outlook.edu | 47.91 | 99% | 2.42.135.144 | -34.6037 | -58.3816 |
| 2539 | Naida | Day | Jul 4, 1987 | ornare.lectus@yahoo.ca | 86.13 | 0% | 13.212.157.126 | 51.5074 | -0.1278 |
| 2873 | Orlando | Zamora | Jul 31, 1991 | nec@aol.edu | 38.83 | 41% | 177.200.39.162 | -23.5505 | -46.6333 |
| 2878 | Zeph | Acosta | Aug 11, 1991 | penatibus.et@yahoo.org | 97.88 | 91% | 237.147.199.198 | 55.7558 | 37.6173 |
| 2903 | Ignatius | Yang | Dec 8, 1995 | ornare@icloud.ca | 91.26 | 88% | 85.93.101.112 | 31.2304 | 121.4737 |
| 3686 | Karina | Barrera | Mar 21, 1985 | ligula.aenean.euismod@aol.org | 97.85 | 95% | 192.249.114.156 | 28.6139 | 77.2090 |
| 3852 | Brenden | Santiago | Aug 22, 1995 | mattis@protonmail.net | 22.62 | 61% | 24.57.165.54 | -33.8688 | 151.2093 |
| 3977 | Cally | Mccray | Jun 1, 1990 | blandit.nam@icloud.ca | 4.09 | 9% | 243.146.10.64 | 41.9028 | 12.4964 |
| 4752 | Hilda | Larson | May 11, 1986 | taciti.sociosqu@hotmail.com | 22.29 | 37% | 72.134.238.161 | 37.7749 | -122.4194 |
| 4969 | Gareth | Key | Nov 24, 1999 | malesuada.vel.venenatis@hotmail.org | 62.56 | 55% | 206.221.197.88 | 19.4326 | -99.1332 |
| 5065 | Stewart | Wood | Mar 7, 1993 | et@protonmail.org | 9.47 | 0% | 7.99.32.216 | -1.2921 | 36.8219 |
| 5124 | Haley | Reese | Sep 15, 1993 | nec@protonmail.com | 74.74 | 100% | 157.26.203.196 | -33.9249 | 18.4241 |
| 5365 | MacKensie | Hess | Nov 4, 1994 | semper@google.net | 40.67 | 69% | 176.53.119.255 | 59.3293 | 18.0686 |
| 5589 | Simon | Haley | Jun 8, 1992 | proin@icloud.com | 72.56 | 77% | 217.236.56.182 | 52.5200 | 13.4050 |
| 5642 | Hop | Gross | Jul 13, 1989 | cras.vehicula.aliquet@google.org | 88.55 | 84% | 247.85.6.89 | 34.0522 | -118.2437 |
| 6526 | Morgan | Monroe | Jul 30, 2000 | id.libero@google.couk | 29.35 | 46% | 60.211.192.84 | 43.6532 | -79.3832 |
| 6534 | Nichole | Pacheco | Nov 19, 1995 | nec@outlook.ca | 22.96 | 99% | 157.232.111.27 | 41.3851 | 2.1734 |
| 7336 | Ursula | Welch | Aug 21, 1995 | odio@yahoo.edu | 64.97 | 0% | 54.113.112.160 | 35.6762 | 139.6503 |
| 8074 | Gay | Clark | Jul 14, 1991 | cursus@aol.net | 20.02 | 25% | 95.230.218.101 | -37.8136 | 144.9631 |
| 8288 | Tate | Myers | Sep 11, 1988 | et@protonmail.ca | 39.47 | 42% | 6.15.221.239 | 30.0444 | 31.2357 |
| 8353 | Ivor | Combs | Jun 12, 1999 | dolor.dolor@google.org | 53.30 | 62% | 177.224.126.72 | -12.0464 | -77.0428 |
| 8548 | Candace | Cain | Apr 17, 1995 | erat.vivamus.nisi@outlook.edu | 99.33 | 100% | 124.157.239.56 | 50.1109 | 8.6821 |
| 8586 | Yoshio | Hopper | Jul 1, 2000 | aliquet.magna.a@aol.ca | 78.07 | 73% | 214.183.243.28 | 13.7563 | 100.5018 |
| 8639 | Katelyn | Stephenson | Jul 17, 2002 | neque.venenatis@aol.com | 91.92 | 89% | 237.242.178.0 | 59.9139 | 10.7522 |
| 8862 | Tatiana | Gray | Jun 26, 1988 | vivamus.rhoncus@outlook.com | 53.48 | 67% | 190.131.31.230 | -22.9068 | -43.1729 |
| 9985 | Bevis | Pittman | Jun 29, 1997 | mi.duis.risus@aol.ca | 69.17 | 79% | 218.230.218.226 | 25.276987 | 55.296249 |
| 9998 | Xavier | Mullen | Sep 12, 2002 | eu.euismod.ac@protonmail.ca | 46.47 | 58% | 45.73.4.132 | 60.1699 | 24.9384 |
Advanced usage
The below example makes the table with the id attribute value of example-2 sortable and makes use of the options parameter to add custom CSS classes.
sortable('#example-2', {
buttonClasses: ['btn', 'btn-sm', 'btn-outline-dark', 'w-100'],
sortedClasses: ['table-light'],
sortedAscendingClasses: ['text-info'],
sortedDescendingClasses: ['text-success']
});
| ID | First Name | Surname | Date of Birth | Email Address | Donation | Score | IP Address | Latitude | Longitude |
|---|---|---|---|---|---|---|---|---|---|
| 1875 | Colette | Stout | May 11, 1995 | neque.in.ornare@aol.com | 84.21 | 99% | 112.142.211.169 | 35.6895 | 139.6917 |
| 1965 | Colton | Cervantes | Jan 17, 1997 | adipiscing.elit@protonmail.org | 43.33 | 81% | 97.205.145.49 | 40.7128 | -74.0060 |
| 2175 | Colt | Lucas | Apr 30, 1995 | in@aol.com | 70.90 | 71% | 68.114.16.232 | 48.8566 | 2.3522 |
| 2378 | Vincent | Ruiz | Feb 15, 1994 | ac@outlook.edu | 47.91 | 99% | 2.42.135.144 | -34.6037 | -58.3816 |
| 2539 | Naida | Day | Jul 4, 1987 | ornare.lectus@yahoo.ca | 86.13 | 0% | 13.212.157.126 | 51.5074 | -0.1278 |
| 2873 | Orlando | Zamora | Jul 31, 1991 | nec@aol.edu | 38.83 | 41% | 177.200.39.162 | -23.5505 | -46.6333 |
| 2878 | Zeph | Acosta | Aug 11, 1991 | penatibus.et@yahoo.org | 97.88 | 91% | 237.147.199.198 | 55.7558 | 37.6173 |
| 2903 | Ignatius | Yang | Dec 8, 1995 | ornare@icloud.ca | 91.26 | 88% | 85.93.101.112 | 31.2304 | 121.4737 |
| 3686 | Karina | Barrera | Mar 21, 1985 | ligula.aenean.euismod@aol.org | 97.85 | 95% | 192.249.114.156 | 28.6139 | 77.2090 |
| 3852 | Brenden | Santiago | Aug 22, 1995 | mattis@protonmail.net | 22.62 | 61% | 24.57.165.54 | -33.8688 | 151.2093 |
| 3977 | Cally | Mccray | Jun 1, 1990 | blandit.nam@icloud.ca | 4.09 | 9% | 243.146.10.64 | 41.9028 | 12.4964 |
| 4752 | Hilda | Larson | May 11, 1986 | taciti.sociosqu@hotmail.com | 22.29 | 37% | 72.134.238.161 | 37.7749 | -122.4194 |
| 4969 | Gareth | Key | Nov 24, 1999 | malesuada.vel.venenatis@hotmail.org | 62.56 | 55% | 206.221.197.88 | 19.4326 | -99.1332 |
| 5065 | Stewart | Wood | Mar 7, 1993 | et@protonmail.org | 9.47 | 0% | 7.99.32.216 | -1.2921 | 36.8219 |
| 5124 | Haley | Reese | Sep 15, 1993 | nec@protonmail.com | 74.74 | 100% | 157.26.203.196 | -33.9249 | 18.4241 |
| 5365 | MacKensie | Hess | Nov 4, 1994 | semper@google.net | 40.67 | 69% | 176.53.119.255 | 59.3293 | 18.0686 |
| 5589 | Simon | Haley | Jun 8, 1992 | proin@icloud.com | 72.56 | 77% | 217.236.56.182 | 52.5200 | 13.4050 |
| 5642 | Hop | Gross | Jul 13, 1989 | cras.vehicula.aliquet@google.org | 88.55 | 84% | 247.85.6.89 | 34.0522 | -118.2437 |
| 6526 | Morgan | Monroe | Jul 30, 2000 | id.libero@google.couk | 29.35 | 46% | 60.211.192.84 | 43.6532 | -79.3832 |
| 6534 | Nichole | Pacheco | Nov 19, 1995 | nec@outlook.ca | 22.96 | 99% | 157.232.111.27 | 41.3851 | 2.1734 |
| 7336 | Ursula | Welch | Aug 21, 1995 | odio@yahoo.edu | 64.97 | 0% | 54.113.112.160 | 35.6762 | 139.6503 |
| 8074 | Gay | Clark | Jul 14, 1991 | cursus@aol.net | 20.02 | 25% | 95.230.218.101 | -37.8136 | 144.9631 |
| 8288 | Tate | Myers | Sep 11, 1988 | et@protonmail.ca | 39.47 | 42% | 6.15.221.239 | 30.0444 | 31.2357 |
| 8353 | Ivor | Combs | Jun 12, 1999 | dolor.dolor@google.org | 53.30 | 62% | 177.224.126.72 | -12.0464 | -77.0428 |
| 8548 | Candace | Cain | Apr 17, 1995 | erat.vivamus.nisi@outlook.edu | 99.33 | 100% | 124.157.239.56 | 50.1109 | 8.6821 |
| 8586 | Yoshio | Hopper | Jul 1, 2000 | aliquet.magna.a@aol.ca | 78.07 | 73% | 214.183.243.28 | 13.7563 | 100.5018 |
| 8639 | Katelyn | Stephenson | Jul 17, 2002 | neque.venenatis@aol.com | 91.92 | 89% | 237.242.178.0 | 59.9139 | 10.7522 |
| 8862 | Tatiana | Gray | Jun 26, 1988 | vivamus.rhoncus@outlook.com | 53.48 | 67% | 190.131.31.230 | -22.9068 | -43.1729 |
| 9985 | Bevis | Pittman | Jun 29, 1997 | mi.duis.risus@aol.ca | 69.17 | 79% | 218.230.218.226 | 25.276987 | 55.296249 |
| 9998 | Xavier | Mullen | Sep 12, 2002 | eu.euismod.ac@protonmail.ca | 46.47 | 58% | 45.73.4.132 | 60.1699 | 24.9384 |