Menu
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?
>I don't want to use plugin JS like bootstrap/jQuery etc
``<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>
``
>@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 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.
>@JMRKER#1629136 Neither does it sort the columns very well (with or without $ symbol)
>@JMRKER#1630253 That script is worthless as is. Not even commented or formatted correctly.
<!DOCTYPE html>
<i> </i><html>
<i> </i><head>
<i> </i><title>Sort a HTML Table</title>
<i> </i><!-- Modified from: https://www.webdeveloper.com/d/393104-sortable-html-tables/14 -->
<i> </i><style>
<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></style>
<i> </i></head>
<i> </i><body>
<i> </i>
<i> </i><p>Click the button to sort the table alphabetically, by name:</p>
<i> </i><p>
<i> </i> <button onclick="sortTable()">Sort Name (up)</button>
<i> </i> <button onclick="sortTable(0,-1)">Sort Name (dn)</button>
<i> </i> <button onclick="sortTable(1,0)">Sort Country (up)</button>
<i> </i> <button onclick="sortTable(1,-1)">Sort Country (dn)</button>
<i> </i></p>
<i> </i>
<i> </i><table id="myTable">
<i> </i> <tr>
<i> </i> <th>Name</th>
<i> </i> <th>Country</th>
<i> </i> </tr>
<i> </i> <tr>
<i> </i> <td>Berglunds snabbkop</td>
<i> </i> <td>Sweden</td>
<i> </i> </tr>
<i> </i> <tr>
<i> </i> <td>North/South</td>
<i> </i> <td>UK</td>
<i> </i> </tr>
<i> </i> <tr>
<i> </i> <td>Alfreds Futterkiste</td>
<i> </i> <td>Germany</td>
<i> </i> </tr>
<i> </i><tr>
<i> </i> <td>Koniglich Essen</td>
<i> </i> <td>Germany</td>
<i> </i></tr>
<i> </i><tr>
<i> </i> <td>Magazzini Alimentari Riuniti</td>
<i> </i> <td>Italy</td>
<i> </i> </tr>
<i> </i> <tr>
<i> </i> <td>Paris specialites</td>
<i> </i> <td>France</td>
<i> </i> </tr>
<i> </i> <tr>
<i> </i> <td>Island Trading</td>
<i> </i> <td>UK</td>
<i> </i> </tr>
<i> </i> <tr>
<i> </i> <td>Laughing Bacchus Winecellars</td>
<i> </i> <td>Canada</td>
<i> </i> </tr>
<i> </i></table>
<i> </i>
<i> </i><script>
<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 < (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 < 0) {
<i> </i> //check if the two rows should switch place:
<i> </i> if (x.innerHTML.toLowerCase() < 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() > 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></script>
<i> </i></body>
<i> </i></html>
<i> </i>