Sort Alphabetically… Then Back to Original Order

This was a fun challenge and seemed like a simple task at first glance – Oh alphabetizing a list? That’s simple…but of course like any project there was a curve ball thrown in that required the user to be able to go back to the original order of the items when the page loaded…and not by refreshing the page!

Requirements

  • This script requires the jQuery JavaScript library.  Ensure this library is attached to your html.

Download

Demo


 

Explanation of Original Ordering

If anyone has a brilliant way of doing this please comment and let me know…I’d love to hear your ideas.

What I came up with was adding a numerical value for the position of the item in the list on load into a hidden div inside each link.

Here’s an example of how the original HTML list looked in structure.

originalHTMLlist

and here’s how it looked after the initial jQuery runs on page load – i wrapped each link with a div to be able to select later and you can see the orig-order-number div added and hidden with the position number (00000, 00001, 00002, etc)

teamlistonload

Clicking the ALPHABETICAL or the ORIGINAL button uses the TEXT value of each .list-link div and sorts them in ascending alphabetical order – both buttons do the EXACT same thing but the difference is when you click the ALPHABETICAL button the script sorts the items then moves the hidden .orig-order-number to the front of the link instead of after it. What this does is set the links up so that the value of the text then changes to the number first then the text (in this example the Team Name) so that when you click the ORIGINAL button it knows what order they were in originally…

value of .list-link in original order

originalordertext

after clicking ALPHABETICAL button the items sort first – then the text values becomes the following so that, when clicking ORIGINAL, it will sort by the preceding number to its original order

alphaordertext

Set Number of Columns

you can actually specify how many columns you want the list to be in using this variable in the js file

var numberofCol = 1;

that is where the div .column-1 comes from – it takes the number specified and splits up the list items equally into columns and equal widths set on each

listColumn

this is an example of the output with the column number set to 3

list3Columns

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

3 × 3 =