• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Sort List of Divs with Data Attribute with Radio Buttons Using Javascript

Sort List of Divs with Data Attribute with Radio Buttons Using Javascript

December 13, 2020 Leave a Comment

We can use Javascript and jQuery to sort a list of divs very easily by using the sort() Javascript function.

Being able to add sorting functionality to lists using Javascript and jQuery can be very beneficial for the user experience of a web page.

It is very common for a page to have a list of products, events, blogs, etc. which the user could want to sort or filter – depending on the purpose of the web page and the information you are trying to present.

In any case, being able to dynamically update the page using Javascript or JQuery can be very beneficial.

One way to be able to add sorting to a web page is to use a list of divs, add data attributes to each div, and then sort using input from a radio button group.

For example, let’s say you have a list of divs with some data attributes:

<div id="list-of-divs">
   <div class="div" data-number="1" data-name="d">d</div>
   <div class="div" data-number="2" data-name="b">b</div>
   <div class="div" data-number="3" data-name="c">c</div>
   <div class="div" data-number="4" data-name="a">a</div>
</div>

In this example, we want to use radio buttons to control the sorting functionality of these divs. We could create a few radio buttons like in code below. Note that we need to add the “onchange” attribute with the Javascript function we are going to write, and pass it this radio button.

<div class="radio-buttons">
   <span class="div-sort-title">Sort by:</span>
   <div class="div-sort-options">
      <span><input type="radio" onchange="radioSort(this)" value="number" name="radio-sort" checked /> Number</span>
      <span><input type="radio" onchange="radioSort(this)" value="ascending" name="radio-sort" />A - Z</span>
      <span><input type="radio" onchange="radioSort(this)" value="descending" name="radio-sort" />Z - A</span>
   </div>
</div>

Now, we need to add the sorting functionality.

Above, in the onchange attribute, we have that we will have a Javascript function called “radioSort”.

Using jQuery, we can easily create sorting functions for both text sorts and numeric sorts of data attributes.

Creating a Javascript sort function requires creating a function that takes two parameters and returns a callback with the desired way to sort.

For a numeric sort, this Javascript sorting function using jQuery is clean and has worked well for me in the past:

list.sort(function(a, b) {
    return parseInt($(b).data('attribute-name')) - parseInt($(a).data('attribute-name'));
})

For a character sort, we can use the String.prototype.localeCompare.call() function to compare two strings:

list.sort(function(a, b) {
    return String.prototype.localeCompare.call($(a).data('attribute-name').toLowerCase(), $(b).data('attribute-name').toLowerCase());
})

Now that we have both of these Javascript sorting functions using jQuery, we can create the full radio button sorting function.

To access the radio_value, we need to call .value on the element which has been passed to our radioSort function by the radio button.

Then, we need to check which value has been selected. After this, we get the list of divs, sort and then use the .html() jQuery function to add the newly sorted divs back to the parent div.

function radioSort(el) {
  var radio_value;
  radio_value= el.value;
  
  if (radio_value == "number") {
  	var divList = $(".div");
	divList.sort(function(a, b) {
	    return parseInt($(b).data('number')) - parseInt($(a).data('number'));
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value== "ascending") {
	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(a).data('name').toLowerCase(), $(b).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value  == "descending") {
  	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(b).data('name').toLowerCase(),$(a).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  }	
}

If you are using WordPress, don’t forget to change the $ to jQuery as below:

function radioSort(el) {
  var radio_value;
  radio_value= el.value;
  
  if (radio_value == "number") {
  	var divList = jQuery(".div");
	divList.sort(function(a, b) {
	    return parseInt(jQuery(b).data('number')) - parseInt(jQuery(a).data('number'));
	});
	jQuery("#list-of-divs").html(divList);
  } else if (radio_value== "ascending") {
	var divList = jQuery(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call(jQuery(a).data('name').toLowerCase(), jQuery(b).data('name').toLowerCase());
	});
	jQuery("#list-of-divs").html(divList);
  } else if (radio_value  == "descending") {
  	var divList = jQuery(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call(jQuery(b).data('name').toLowerCase(),jQuery(a).data('name').toLowerCase());
	});
	jQuery("#list-of-divs").html(divList);
  }	
}

In this example, I used jQuery because of how clean it is. A pure Javascript solution is of course possible, but would be more messy with how you get the children divs and how you add it back to the parent divs.

The final code and output for this example of how to use radio buttons to sort a list of divs using Javascript and jQuery is below:

HTML Code Output:

Sort by:

NumberA – Z Z – A
d
b
c
a

Full Code:

<div id="list-of-divs">
   <div class="div" data-number="1" data-name="d">d</div>
   <div class="div" data-number="2" data-name="b">b</div>
   <div class="div" data-number="3" data-name="c">c</div>
   <div class="div" data-number="4" data-name="a">a</div>
</div>
<div class="radio-buttons">
   <span class="div-sort-title">Sort by:</span>
   <div class="div-sort-options">
      <span><input type="radio" onchange="radioSort(this)" value="number" name="radio-sort" checked /> Number</span>
      <span><input type="radio" onchange="radioSort(this)" value="ascending" name="radio-sort" />A - Z</span>
      <span><input type="radio" onchange="radioSort(this)" value="descending" name="radio-sort" />Z - A</span>
   </div>
</div>

<script>

function radioSort(el) {
  var radio_value;
  radio_value= el.value;
  
  if (radio_value == "number") {
  	var divList = $(".div");
	divList.sort(function(a, b) {
	    return parseInt($(b).data('number')) - parseInt($(a).data('number'));
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value== "ascending") {
	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(a).data('name').toLowerCase(), $(b).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  } else if (radio_value  == "descending") {
  	var divList = $(".div");
	divList.sort(function(a, b){
	    return String.prototype.localeCompare.call($(b).data('name').toLowerCase(),$(a).data('name').toLowerCase());
	});
	$("#list-of-divs").html(divList);
  }	
}

</script>

Other Articles You'll Also Like:

  • 1.  How to Repeat a String in JavaScript
  • 2.  Using JavaScript to Get the Base URL
  • 3.  How to Check if a String Contains Vowels in JavaScript
  • 4.  Using JavaScript to Round to 2 Decimal Places
  • 5.  Using JavaScript to Convert Month Number to Name
  • 6.  Using jQuery to Select Multiple Ids
  • 7.  Using JavaScript to Remove Apostrophe From a String
  • 8.  Using the appendChild Method with JavaScript to Add Items to a List
  • 9.  Using JavaScript to Remove Forward Slash From String
  • 10.  JavaScript toLocaleString – Display the Date and Time Using JavaScript

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy