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

score 1 · Answer 1 · edited May 23 '17 at 11:51

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 '17 at 11:51

Community

1
1

answered Jul 13 '15 at 18:14

halfzebra

6,771
4
32
47

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... – thomas samot Jul 13 '15 at 18:45
@thomassamot I have updated my answer to demonstrate, how you can sort elements. – halfzebra Jul 13 '15 at 19:14
thank you, this works. but i have two further questions. as in the preview (http://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! – thomas samot Jul 13 '15 at 19:44
@thomassamot I have added a function for highlighting the active state, regarding the styling, you can replace the ` – halfzebra Jul 13 '15 at 20:01
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!? – thomas samot Jul 13 '15 at 20:17
ok. new problem. in the css part you programmed that the button that is active gets bold. what i need, is that the button which is inactive gets striked through. i tried to make both of them striked in the html part and worte " .btn-sort--active { text-decoration: none; }" in the css part. but it didnt put the strike trough away... how do i proceed? – thomas samot Jul 13 '15 at 21:17
@thomassamot Have a look http://tjvantoll.com/2013/09/12/building-custom-text-strikethroughs-with-css/ – halfzebra Jul 13 '15 at 21:23
thanks. but i think it's trickier than that. it doesnt work with the ".btn-sort--active {line-through" because it strikes the wrong button. in order to reach my goal the active button has to say to the inactive button that it has to be striked-through. is that possible? – thomas samot Jul 13 '15 at 21:31
@thomassamot I have updated the code, so now it looks as you expect. – halfzebra Jul 13 '15 at 22:43

score 0 · Answer 2 · answered Jul 13 '15 at 18:17

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);

Sorting elements with jQuery using data attributes

2 Answers2

Linked