[ANSWERED] soutionAdd Sort Arrows to Sortable Table Headers

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:
Contact paulp575

[ANSWERED] soutionAdd Sort Arrows to Sortable Table Headers

Post by paulp575 »

I have a table where I want the user to be able to change the sequence of the first 2 columns (out of 5 columns in the table) (I am using javascript to sort the columns):

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="School Dists">
<meta name="description" content="School Board Meetings – Dates, Agendas, and Minutes">
<title>School Board Meetings – Dates, Agendas, and Minutes</title>

<style>
  body
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: Arial,helvetica,sans-serif;
    MARGIN: 10px;
    BACKGROUND-COLOR: #ffffff;                                  /* white */
  }

  A:LINK
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  A:VISITED
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #000080;                                             /* navy */
    TEXT-DECORATION: none;
  }

  A:HOVER
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: underline;
  }

  A:ACTIVE
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  *.FLOAT-RIGHT
  {
    FLOAT: right;
  }

  *.IMAGE-ALIGN-VERTICAL                                        /* Aligns e-mail addresses on page */
  {
    VERTICAL-ALIGN: -7px;
  }

  *.MARGIN-LEFT-10PX
  {
    MARGIN-LEFT: 10px;
  }

  table#SCHOOL_DISTRICTS
  {
    BORDER-COLLAPSE: collapse;
  }

  table#SCHOOL_DISTRICTS td
  {
    PADDING: .3em;
    BORDER: 1px solid black;
  }

  *.TEXT-ALIGN-CENTER
  {
    TEXT-ALIGN: center;
  }

  *.TEXT-ALIGN-LEFT
  {
    TEXT-ALIGN: LEFT;
  }

  *.TEXT-BOLD
  {
    FONT-WEIGHT: bold;
  }

  th
  {
    CURSOR: pointer;
  }

  tr:nth-child(even)
  {
    BACKGROUND-COLOR: #f2f2f2;
  }

  *.WIDTH20P
  {
    WIDTH: 20%;
  }

  *.WIDTH25P
  {
    WIDTH: 25%;
  }

  *.WIDTH100P
  {
    WIDTH: 100%;
  }
</style>

</head>

<body>

<h3 class="TEXT-ALIGN-CENTER TEXT-BOLD">School Board Meetings &#8211; Dates, Agendas, and Minutes</h3>

<table class="FLOAT-RIGHT MARGIN-LEFT-10PX">
  <tr><td>(appropriate graphic)</td></tr>
</table>
(introductory text)
<br><br>

<div class="TEXT-ALIGN-CENTER"><span class="TEXT-BOLD">Note:</span> All links open in a new window.</div>

Click column header (below) to sort table.

<!--
<div class="TEXT-ALIGN-CENTER">
  Click <span class="TEXT-BOLD">(District/Entity or Locality)</span> to sort the table.
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  The first time you click, the sorting direction is ascending (A to Z).
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  Click again, and the sorting direction will be descending (Z to A).
</div>
-->

<table id="SCHOOL_DISTRICTS" class="WIDTH100P">
  <tr class="TEXT-ALIGN-LEFT TEXT-BOLD">
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by District/Entity, 1 for sorting by Locality:-->
    <td onclick="sortTable(0)" class="TEXT-ALIGN-LEFT TEXT-BOLD">District/Entity</td>
    <td onclick="sortTable(1)" class="TEXT-ALIGN-LEFT TEXT-BOLD">Locality</td>
    <td class="WIDTH20P">Meets</td>
    <td class="WIDTH25P">Agendas</td>
    <td class="WIDTH25P">Minutes</td>
  </tr>
  <tr>
    <td>Almira</td>
    <td>Almira</td>
    <td>4th Tue – 6:00 PM (Oct – Mar)<br>4th Tue – 7:00 PM (Apr - Sep)</td>
    <td colspan="2">
      <a href="https://www.almirasd.org/Page/233" target="_blank">https://www.almirasd.org/Page/233</a>
    </td>
  </tr>
  <tr>
    <td>Asotin-Anatone</td>
    <td>Asotin</td>
    <td>4th Mon – 6:00 PM</td>
    <td>
      <a href="https://app.eduportal.com/publicfolders/1094975/list/52559" target="_blank">https://app.eduportal.com/publicfolders/1094975/list/52559</a>
    </td>
    <td>
      <a href="https://app.eduportal.com/publicfolders/1094975/list/49247" target="_blank">https://app.eduportal.com/publicfolders/1094975/list/49247</a>
    </td>
  </tr>
  <tr>
    <td>Benge</td>
    <td>Benge</td>
    <td>4th Mon - 5:00 PM (winter)<br>6:00 PM (spring and summer)</td>
    <td>(not posted)</td>
    <td>(not posted)</td>
  </tr>
  <tr>
    <td>East Valley (Spokane)</td>
    <td>Spokane</td>
    <td>
      <a href="https://core-docs.s3.amazonaws.com/documents/asset/uploaded_file/3311/EVSD/3019352/2023-2024_Board_Meeting_Schedule.pdf">https://core-docs.s3.amazonaws.com/documents/asset/uploaded_file/3311/EVSD/3019352/2023-2024_Board_Meeting_Schedule.pdf</a></td>
    <td colspan="2">
      <a href="https://go.boarddocs.com/wa/evsd361/Board.nsf/Public" target="_blank">https://go.boarddocs.com/wa/evsd361/Board.nsf/Public</a>
      </td>
  </tr>
  <tr>
    <td>Central Valley</td>
    <td>Spokane Valley</td>
    <td>2nd &amp; 4th Mondays – 6:30 PM</td>
    <td colspan="2">
      <a href="https://www.cvsd.org/apps/pages/BoardBulletin" target="_blank">https://www.cvsd.org/apps/pages/BoardBulletin</a>
    </td>
  </tr>
  <tr>
    <td>Coulee-Hartline</td>
    <td>Coulee City</td>
    <td>4th Wed<br>(start time varies)</td>
    <td colspan="2">
      <a href="https://drive.google.com/drive/folders/1Qwz5lyKdKnLCxD9IrNbRlLrNxlM_OO4T" target="_blank">https://drive.google.com/drive/folders/1Qwz5lyKdKnLCxD9IrNbRlLrNxlM_OO4T</a>
    </td>
  </tr>
  <tr>
    <td>Spokane</td>
    <td>Spokane</td>
    <td>
      <a href="https://www.spokaneschools.org/site/handlers/filedownload.ashx?moduleinstanceid=27903&dataid=32489&FileName=2023-24%20SPS%20School%20Board%20Calendar.pdf">https://www.spokaneschools.org/site/handlers/filedownload.ashx?moduleinstanceid=27903&dataid=32489&FileName=2023-24%20SPS%20School%20Board%20Calendar.pdf</a>
    </td>
    <td colspan="2">
      <a href="https://go.boarddocs.com/wa/spokane/Board.nsf/Public">https://go.boarddocs.com/wa/spokane/Board.nsf/Public</a>
    </td>
  </tr>
  <tr>
    <td>Selkirk</td>
    <td>Metaline Falls</td>
    <td>4th Mon - 6:00 PM</td>
    <td>
      <a href="https://www.selkirkschools.org/documents/district/school-board/board-agendas/156889" target="_blank">https://www.selkirkschools.org/documents/district/school-board/board-agendas/156889</a>
    </td>
    <td>
      <a href="https://www.selkirkschools.org/documents/district/school-board/board-minutes/135351" target="_blank">https://www.selkirkschools.org/documents/district/school-board/board-minutes/135351</a>
    </td>
  </tr>
  <tr>
    <td>Riverside</td>
    <td>Chattaroy</td>
    <td>
      <a href="https://drive.google.com/file/d/1WRIpQ3Bnu1qzri4RcHyjE-L1wi-RYh41/view" target="_blank">https://drive.google.com/file/d/1WRIpQ3Bnu1qzri4RcHyjE-L1wi-RYh41/view</a>
    </td>
    <td>
      <a href="https://drive.google.com/drive/folders/0B9lyi3PUkRugNE94Rm5FcXNzb1E?resourcekey=0-MCmDy8rnkn3JBqqjD3yuzQ" target="_blank">https://drive.google.com/drive/folders/0B9lyi3PUkRugNE94Rm5FcXNzb1E?resourcekey=0-MCmDy8rnkn3JBqqjD3yuzQ</a>
    </td>
    <td>
      <a href="https://drive.google.com/drive/folders/0B9Be4dUbyrcRbVc0bUNVUko5SzQ?resourcekey=0-OyfLHNTRz653_jTOuzbk-A" target="_blank">https://drive.google.com/drive/folders/0B9Be4dUbyrcRbVc0bUNVUko5SzQ?resourcekey=0-OyfLHNTRz653_jTOuzbk-A</a>
    </td>
  </tr>
</table>

<script>
  function sortTable(n)
  {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("SCHOOL_DISTRICTS");
    switching = true;
    //Set the sorting direction to ascending:
    dir = "asc"; 
    /*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")[n];
        y = rows[i + 1].getElementsByTagName("TD")[n];
        /*check if the two rows should switch place, based on the direction, asc or desc:*/
        if (dir == "asc")
        {
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase())
          {
            //if so, mark as a switch and break the loop:
            shouldSwitch= true;
            break;
          }
        }
        else if (dir == "desc")
        {
          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;
        //Each time a switch is done, increase this count by 1:
        switchcount ++;      
      }
      else
      {
        /*If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.*/
        if (switchcount == 0 && dir == "asc")
        {
          dir = "desc";
          switching = true;
        }
      }
    }
  }
</script>
<br>
<div class="TEXT-ALIGN-CENTER">
  <span class="TEXT-BOLD">NOTE:</span> Dates and times subject to change. Contact city/town to confirm dates and times.
</div>
<br>

<div class="TEXT-ALIGN-CENTER">
  <span class="TEXT-BOLD">Errors? Corrections?</span>
  E-mail: <img class="IMAGE-ALIGN-VERTICAL" src="updates-e-mail-address.jpg" alt="Updates e-mail address image" title="Updates e-mail address" width="251" height="23">
  <br>
  Please provide as much detail as possible to ensure we make the right correction(s).
</div>
<br>

<div class="TEXT-ALIGN-CENTER">Page last updated: November 23, 2023</div>
<br>
</body>
</html>
How do I add the little up/down arrows to the right side of the 2 columns I want the users to be able to sort? I've looked at several online web pages, but the code is too complicated for me to understand.

Table currently is sortable, but I want to eliminate the instructions on the line immediately above the table to lessen the amount of text on the page.

Thanks.
Last edited by paulp575 on Mon Dec 04, 2023 6:57 pm, edited 1 time in total.
paulp575
Top
User avatar
Albert Wiersch
Site Admin
Posts: 3822
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:
Contact Albert Wiersch

Re: Add Sort Arrows to Sortable Table Headers

Post by Albert Wiersch »

The simplest and easiest thing to do, in my opinion, would be to add "&nbsp;&#x2b83;" to the column header captions that are sortable.

That should add " ⮃" which, to me, is an indicator that the column is sortable.

To find this character, I searched for "triangle" here:
https://unicodeplus.com/search

I would also recommend using <th> instead of <td> for table header cells.

I hope this helps!
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Top
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:
Contact paulp575

Re: Add Sort Arrows to Sortable Table Headers

Post by paulp575 »

I changed the table header cells from <td> to <th>.
That worked but it didn't change direction when I changed the sort of the column.
paulp575
Top
User avatar
Albert Wiersch
Site Admin
Posts: 3822
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:
Contact Albert Wiersch

Re: Add Sort Arrows to Sortable Table Headers

Post by Albert Wiersch »

paulp575 wrote: ↑Tue Nov 28, 2023 6:17 pm I changed the table header cells from <td> to <th>.
That worked but it didn't change direction when I changed the sort of the column.
The character with the up/down arrows won't change unless you change it in the script that sorts the rows.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Top
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:
Contact paulp575

Re: Add Sort Arrows to Sortable Table Headers

Post by paulp575 »

I figured that.
I'll have to see if I can find the code to insert both arrows
This is what I'm hoping to achieve:
Up_down arrows.jpg
Up_down arrows.jpg (18.77 KiB) Viewed 8211 times
This came from this web page: https://en.wikipedia.org/wiki/United_St ... l_election

When you click on any of the arrows on the example page, it changes to either an up or down arrow.
I've seen some pages where the arrows don't change. I'd be happy with that.
paulp575
Top
Post Reply

Return to “General Web Development”