Do-It-Yourself LibGuide Enhancements: Sortable Tables

Lists like this were on an earlier version of our Course Reserves page.

Click on one of the first three table column names (shown in yellow) to sort the table.

This sortable table uses JavaScript from W3Schools.com, which is shown in the box below.

You need to add code to the HTML for the table, and you have to create and upload the script file.

Table HTML Code

For a table with labeled columns, it is good practice for the cells in the top row to be tagged as table headers (<th>) rather than table data (<td>) in the HTML code. This is for accessibility reasons, as it allows screen reading programs to read out the contents of a table in a way that gives context to the data.

In the HTML code for your table, for the columns you want to be able to sort on, include in the table header <th> tags these attributes: onclick="sortTable(0)" and onkeypress="sortTable(0)"

Use the number 0 for the table's first column, 1 for the second column, etc.

Also, add the attribute tabindex="0" to each header tag. Always use the number zero.

The code for the first header tag, with the added attributes, will look like this:

The code for the second header tag, with the added attributes, will look like this:

Create and Upload the Script File

Create a script file by copying the code in the Table Sorting Code box below into a text editor like Windows Notepad. Save the file with a name that ends with ".js", I named my file "tablesorter.js."

Upload the file to LibGuides using their Upload Customization Files function in Admin > Look & Feel > Custom JS/CSS. Make note of the "Include Code" shown for that file.

At the bottom of the HTML box for your table, add the "include code" to make the script act on your table.

The line would look like this:

Focus Indicator

For the example table above, I added a line to the stylesheet to put a prominent blue box around the column header that has "focus". At any given time, one link or button on a webpage has the state of focus, meaning that pressing the Enter key will activate that control. Having an obvious focus indicator is for accessibility purposes; it helps someone to use controls on a webpage without a mouse. The "tabindex" attribute described above allows the column headers to receive focus.

In table code generated by LibGuides, table headers have the class name "ck_border".

The JavaScript code from W3Schools:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  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.getElementsByTagName("TR");
    /*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;
      }
    }
  }
}