Sorting elements with jQuery using data attributes

Question

Just to let you know, I'm a rookie. I try to programm a certain function for the menu-navigation on my website. (http://thomasmedicus.at/)

I want visitors on my website to be able to sort my projects either by "date" or by "relevance". I created this image so you can understand me better: preview

in the first image the projects are sortet by relevance. therefor "date" is striked trough. when you now click on the stricked trough "date" the order of the projects (2, 1, 3) changes. what also happens is that "relevance" is strickt trough and "date" not anymore. of course this should also work the other way round when you then click on "relevence" again. i hope you get the idea!?

i managed to create this badly programmed script, but what isnt programmed here is the striking through:

<html>
<head>
<style type="text/css">
<!--
body {
	text-align: left;
}
#fullDescrip {
	width: 450px;
	height: 200px;
	border: solid #000000 2px;
	margin: 0 auto;
	text-align: justify;
	padding: 20px;


}
#prodContainer .products {
	margin: 10px;
	border: solid #AAAAAA 1px;
	width: 100px;
	height: 100px;


}
#prodContainer2 .products {
	margin: 10px;
	border: solid #AAAAAA 1px;
	width: 100px;
	height: 100px;

}
-->
</style>
<script>
	var rand = Math.floor(Math.random() * 2);//the number here must be the total number of products you have listed
	var prod = new Array();
	prod[0] = "<width='100' height='100'>changed here!";
	prod[1] = "<width='100' height='100'>changed again!";

	function loadProd(content){
		document.getElementById('fullDescrip').innerHTML = content;
	}
</script>





</head>

<body>
<div id="fullDescrip">
<script>
document.getElementById('fullDescrip').innerHTML = prod[rand];

</script>
</div>

        <table id="prodContainer">
	<tr>
     	<td>
        <div id="prod1" class="products" onClick="loadProd(prod[0])">
        button 1
        </div>
        </td>
        <td>

        <table id="prodContainer2">
	<tr>
    	<td>
        <div id="prod2" class="products" onClick="loadProd(prod[1])">
        button 2
        </div>
        </td>


        
</body>
</html>

it would be awesome if you can help me here. since i am no programmer i'm not able to do it on my own...

thanks, tom

Community · Accepted Answer · 2017-05-23 11:51:12Z

1

I think you should leave vanilla JavaScript for later and use jQuery library to make your life much easier. Your website is already using it, so you don't have to adjust anything.

Here is a good example of sorting with jQuery jQuery sort elements using data id

All you need is to provide some criteria for sorting, the example above relies on data-attribute, which is really handy for this kind of functionality.

/** 
 * This function returns a callback for data-attribute based sorting.
 *
 * @param sortCriteria
 *   Name of the data-attribute for sorting.
 * @param itemsToSort
 *   A string selector for items for sorting.
 * @param container
 *   A container to put items.
 * @returns {Function}
 */
var sortByDataAttr = function(sortCriteria, itemsToSort, container) {
    return function() {

      // Grab all the items for sorting.
      var $collection = $(itemsToSort);

      // Sort them and append in to container.
      $collection.sort(function(a, b) {
        return $(a).data(sortCriteria) - $(b).data(sortCriteria)
      }).appendTo($(container));
    };
  },
  /**
   * Remove class from all elements and apply to current.
   *
   * @param current
   *   HTML node to apply class.
   * @param activeClass
   *   Active-state string class.
   */
  highlightActive = function(current, activeClass) {
    $('.' + activeClass).removeClass(activeClass);
    $(current).addClass(activeClass);
  };

// Sort by 'data-weight' at the start.
highlightActive('.btn-sort-weight', 'btn-sort--active');
sortByDataAttr('weight', '.item', '.list');

$('.btn-sort-weight').on('click', function() {
  highlightActive(this, 'btn-sort--active');
  sortByDataAttr('weight', '.item', '.list')();
});

$('.btn-sort-index').on('click', function() {
  highlightActive(this, 'btn-sort--active');
  sortByDataAttr('index', '.item', '.list')();
});

.btn {
  text-decoration: line-through;;
}

.btn-sort--active {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-sort-weight">Sort by weight</button>
<button class="btn btn-sort-index">Sort by index</button>
<ul class="list">
  <li class="item" data-index="133" data-weight="5">First - weight: 5 - index: 133</li>
  <li class="item" data-index="2" data-weight="1">Second - weight: 1 - index: 2</li>
  <li class="item" data-index="87" data-weight="16">Third - weight: 16 - index: 87</li>
</ul>

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 13, 2015 at 18:14

halfzebra

6,8154 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

thomas samot Over a year ago

thanks for your answers! looks like i went the wrong way... can you give me a code that more or less contains the functions I need? maybe you know a example which does prettty much what i need, so i can change the 'visible words' and adapt it to my website? I'm a noob, sorry...

halfzebra Over a year ago

@thomassamot I have updated my answer to demonstrate, how you can sort elements.

thomas samot Over a year ago

thank you, this works. but i have two further questions. as in the preview (thomasmedicus.at/wp-content/uploads/2015/07/preview.gif) i'd want the buttons to change. now it is not possible to see which button is active? the inactive button should be striked trough. the other question: how can i get rid of the button-look? i'd like the button to look like normal text (as seen in the preview). thanks!

halfzebra Over a year ago

@thomassamot I have added a function for highlighting the active state, regarding the styling, you can replace the <button> with any other suitable element or style it, according to your needs using this guide stackoverflow.com/questions/14950238/… They're talking about <input>, but the same code will work for buttons as well.

thomas samot Over a year ago

i think there is some kind of error. when i run the snipped code it makes the active button bold, but the sorting doesnt work anymore!?

|

Sachin Kanungo · Accepted Answer · 2015-07-13 18:17:29Z

0

Refer to this site for sorting algorithms http://www.sorting-algorithms.com/. You should go by scalability to overcome future problems with sorting.Array.sort() is helpful. Check this fiddle http://jsfiddle.net/BF8LV/2/

    function sortAscending(data_A, data_B)
{
    return (data_A - data_B);
}
var array =[ 9, 10, 21, 46, 19, 11]
array.sort(sortAscending) 
alert(array);

answered Jul 13, 2015 at 18:17

Sachin Kanungo

1,0949 silver badges17 bronze badges

Collectives™ on Stack Overflow

Sorting elements with jQuery using data attributes

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related