/    Sign up×
Community /Pin to ProfileBookmark

Sortable HTML tables

I’m populating an HTML table from a database. So starting my table (<table>), setting my headers (TR, TH) then looping though my DB results then ending my table (</table>).

All well and good.

Is it possible to make each column sortable?

The data is integer, string, date formats.

I don’t want to reload the page and re-query the database each time it’s sorted.
I don’t want to use the Google Charts table as I want to style it very specifically to my site.
I don’t want to use plugin JS like bootstrap/jQuery etc

Is there perhaps JS function I could call for each data type and sort each normal table row?

to post a comment
JavaScript

15 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERMar 08.2021 — Lots of examples:

https://bfy.tw/QVlL

and: https://www.w3schools.com/howto/howto_js_sort_table.asp
Copy linkTweet thisAlerts:
@SempervivumMar 08.2021 — >I don't want to use plugin JS like bootstrap/jQuery etc

I recommend to reconsider this as there is a fine plugin for sorting and more:

https://datatables.net

Features not being required can be switched off. Ajax is supported, thus you do not have to create the HTML of the table's body yourself.
Copy linkTweet thisAlerts:
@kiwisauthorMar 08.2021 — @Sempervivum#1629019

The issue with this, is I end up with a whole bunch of styling I don't want and columns sortable that I can't sort. Like images.

It does work quickly but overrides too much of my website.
Copy linkTweet thisAlerts:
@kiwisauthorMar 08.2021 — @JMRKER#1629018

I love these useless replies.
Copy linkTweet thisAlerts:
@kiwisauthorMar 08.2021 — @kiwis80#1629049

Having another look at this, I've removed the pagination and search features with their "options".

But it forces in a heap of CSS which overrides my styles. It's changing the table width etc.

Is there ways to disable this? I can't see it in the documentation.

I'll post something on their board as well.
Copy linkTweet thisAlerts:
@SempervivumMar 09.2021 — Datatable's styles can be removed by not including it's CSS file. However this will remove the sorting arrows either as they are added by CSS background-image. You can add them again by this CSS:
``<i>
</i> thead th {
background-repeat: no-repeat;
background-position: center right;
}

thead th.sorting_asc {
background-image: url(images/sort_asc.png);
}

thead th.sorting_desc {
background-image: url(images/sort_desc.png);
}<i>
</i>
``

or use any custom arrows you like.

I admit that datatables is a bit oversized when you need the sorting feature only. There are a lot of table sorters available, e. g. this one at Github:

https://github.com/tristen/tablesort

You might consider using this one.
Copy linkTweet thisAlerts:
@sibertMar 09.2021 — I found a short code that sorts tables, but honestly I have no idea how it works or if it is useful. If somebody could explain or examine this, it should be great. And it does not sort the first row for some reason.

https://jsfiddle.net/cq9z83kb/1/

I have now added this javascript to my test site and without any css and changing the html it seems to work.

http://94.237.92.101:6060/posts
Copy linkTweet thisAlerts:
@valentindu8Mar 10.2021 — > @Sempervivum#1629019 I recommend to reconsider this as there is a fine plugin for sorting and more:

> [https://datatables.net](https://datatables.net/)

> Features not being required can be switched off [url=https://www.garde-meuble.com/]Stockage Mobile[/url]. Ajax is supported, thus you do not have to create the HTML of the table's body yourself.


@Sempervivum#1629019 [url=https://www.garde-meuble.com/]Stockage Mobile[/url]

> @Sempervivum#1629019 I recommend to reconsider this as there is a fine plugin for sorting and more:

> [https://datatables.net](https://datatables.net/)

> Features not being required can be switched off. Ajax is supported, thus you do not have to create the HTML of the table's body yourself.

Could you give us some examples so that we can test them please.
Copy linkTweet thisAlerts:
@JMRKERMar 10.2021 — @sibert#1629077 "And it does not sort the first row for some reason."

Neither does it sort the columns very well (with or without $ symbol)
Copy linkTweet thisAlerts:
@sibertMar 18.2021 — > @JMRKER#1629136 Neither does it sort the columns very well (with or without $ symbol)

If you remove the , (comma) it will sort better.

I think I have managed to get this to work. Based on the old code and replaced with more readable code

And live http://94.237.92.101:6060/posts

https://jsfiddle.net/9rzkw5xn/1/
Copy linkTweet thisAlerts:
@johnmorganMar 18.2021 — Hi everyone. Thanks for sharing this useful information.
Copy linkTweet thisAlerts:
@mamoun_bashierMar 20.2021 — take this script as consideration and try it in your case.

<!DOCTYPE html>

<html>

<head>

<title>Sort a HTML Table Alphabetically</title>

<style>

table {

border-spacing: 0;

width: 100%;

border: 1px solid #ddd;

}

th, td {

text-align: left;

padding: 16px;

}

tr:nth-child(even) {

background-color: #f2f2f2

}

</style>

</head>

<body>

<p>Click the button to sort the table alphabetically, by name:</p>

<p><button onclick="sortTable()">Sort</button></p>

<table id="myTable">

<tr>

<th>Name</th>

<th>Country</th>

</tr>

<tr>

<td>Berglunds snabbkop</td>

<td>Sweden</td>

</tr>

<tr>

<td>North/South</td>

<td>UK</td>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Germany</td>

</tr>

<tr>

<td>Koniglich Essen</td>

<td>Germany</td>

</tr>

<tr>

<td>Magazzini Alimentari Riuniti</td>

<td>Italy</td>

</tr>

<tr>

<td>Paris specialites</td>

<td>France</td>

</tr>

<tr>

<td>Island Trading</td>

<td>UK</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Canada</td>

</tr>

</table>

<script>

function sortTable() {

var table, rows, switching, i, x, y, shouldSwitch;

table = document.getElementById("myTable");

switching = true;

/*Make a loop that will continue until

no switching has been done:*
/

while (switching) {

//start by saying: no switching is done:

switching = false;

rows = table.rows;

/*Loop through all table rows (except the

first, which contains table headers):*
/

for (i = 1; i < (rows.length - 1); i++) {

//start by saying there should be no switching:

shouldSwitch = false;

/*Get the two elements you want to compare,

one from current row and one from the next:*
/

x = rows[i].getElementsByTagName("TD")[0];

y = rows[i + 1].getElementsByTagName("TD")[0];

//check if the two rows should switch place:

if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

//if so, mark as a switch and break the loop:

shouldSwitch = true;

break;

}

}

if (shouldSwitch) {

/*If a switch has been marked, make the switch

and mark that a switch has been done:*
/

rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

switching = true;

}

}

}

</script>



</body>

</html>
Copy linkTweet thisAlerts:
@JMRKERApr 12.2021 — @mamoun_bashier#1629459

That script is worthless as is. Not even commented or formatted correctly.
Copy linkTweet thisAlerts:
@sibertApr 12.2021 — > @JMRKER#1630253 That script is worthless as is. Not even commented or formatted correctly.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table 😆
Copy linkTweet thisAlerts:
@JMRKERApr 13.2021 — @sibert#1630254 Works a lot better than the original post above. :)

And can be modified to sort more than one column with up/down choices.

&lt;!DOCTYPE html&gt;
<i> </i>&lt;html&gt;
<i> </i>&lt;head&gt;
<i> </i>&lt;title&gt;Sort a HTML Table&lt;/title&gt;
<i> </i>&lt;!-- Modified from: https://www.webdeveloper.com/d/393104-sortable-html-tables/14 --&gt;
<i> </i>&lt;style&gt;
<i> </i>table {
<i> </i> border-spacing: 0;
<i> </i> width: 100%;
<i> </i> border: 1px solid #ddd;
<i> </i>}
<i> </i>th, td {
<i> </i> text-align: left;
<i> </i> padding: 16px;
<i> </i>}
<i> </i>tr:nth-child(even) {
<i> </i> background-color: #f2f2f2
<i> </i>}
<i> </i>&lt;/style&gt;
<i> </i>&lt;/head&gt;
<i> </i>&lt;body&gt;
<i> </i>
<i> </i>&lt;p&gt;Click the button to sort the table alphabetically, by name:&lt;/p&gt;
<i> </i>&lt;p&gt;
<i> </i> &lt;button onclick="sortTable()"&gt;Sort Name (up)&lt;/button&gt;
<i> </i> &lt;button onclick="sortTable(0,-1)"&gt;Sort Name (dn)&lt;/button&gt;
<i> </i> &lt;button onclick="sortTable(1,0)"&gt;Sort Country (up)&lt;/button&gt;
<i> </i> &lt;button onclick="sortTable(1,-1)"&gt;Sort Country (dn)&lt;/button&gt;
<i> </i>&lt;/p&gt;
<i> </i>
<i> </i>&lt;table id="myTable"&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;th&gt;Name&lt;/th&gt;
<i> </i> &lt;th&gt;Country&lt;/th&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;Berglunds snabbkop&lt;/td&gt;
<i> </i> &lt;td&gt;Sweden&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;North/South&lt;/td&gt;
<i> </i> &lt;td&gt;UK&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
<i> </i> &lt;td&gt;Germany&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i>&lt;tr&gt;
<i> </i> &lt;td&gt;Koniglich Essen&lt;/td&gt;
<i> </i> &lt;td&gt;Germany&lt;/td&gt;
<i> </i>&lt;/tr&gt;
<i> </i>&lt;tr&gt;
<i> </i> &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
<i> </i> &lt;td&gt;Italy&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;Paris specialites&lt;/td&gt;
<i> </i> &lt;td&gt;France&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;Island Trading&lt;/td&gt;
<i> </i> &lt;td&gt;UK&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
<i> </i> &lt;td&gt;Canada&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i>&lt;/table&gt;
<i> </i>
<i> </i>&lt;script&gt;
<i> </i>function sortTable(rc = 0, sortOrder = 0) {
<i> </i> var table, rows, switching, i, x, y, shouldSwitch;
<i> </i> table = document.getElementById("myTable");
<i> </i> switching = true;
<i> </i> /*Make a loop that will continue until no switching has been done:*/
<i> </i> while (switching) {
<i> </i> //start by saying: no switching is done:
<i> </i> switching = false;
<i> </i> rows = table.rows;
<i> </i> /*Loop through all table rows (except the first, which contains table headers):*/
<i> </i> for (i = 1; i &lt; (rows.length - 1); i++) {
<i> </i> //start by saying there should be no switching:
<i> </i> shouldSwitch = false;
<i> </i> /*Get the two elements you want to compare, one from current row and one from the next:*/
<i> </i> x = rows[i].getElementsByTagName("TD")[rc];
<i> </i> y = rows[i + 1].getElementsByTagName("TD")[rc];
<i> </i> if (sortOrder &lt; 0) {
<i> </i> //check if the two rows should switch place:
<i> </i> if (x.innerHTML.toLowerCase() &lt; y.innerHTML.toLowerCase()) {
<i> </i> //if so, mark as a switch and break the loop:
<i> </i> shouldSwitch = true;
<i> </i> break;
<i> </i> }
<i> </i> } else {
<i> </i> //check if the two rows should switch place:
<i> </i> if (x.innerHTML.toLowerCase() &gt; y.innerHTML.toLowerCase()) {
<i> </i> //if so, mark as a switch and break the loop:
<i> </i> shouldSwitch = true;
<i> </i> break;
<i> </i> }
<i> </i> }
<i> </i> }
<i> </i> if (shouldSwitch) {
<i> </i> /*If a switch has been marked, make the switch and mark that a switch has been done:*/
<i> </i> rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
<i> </i> switching = true;
<i> </i> }
<i> </i> }
<i> </i>}
<i> </i>&lt;/script&gt;
<i> </i>&lt;/body&gt;
<i> </i>&lt;/html&gt;
<i> </i>
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...