1

So I'm trying to sort some elements by a couple of data-attributes.

One is Price which will have a number from 1-4. I've figured out how to do it by lowest but can't seem to get Sort by highest to work.

Second is by Created by, which is outputting a date/time from my django backend.

My question:

  • How do I get to sort by HIGHEST price working? Lowest works currently
  • How do I get Sort by CREATED BY working? It currently isn't working at all.

Sample element:

<li class="browse-item" data-price="1" data-created="Oct. 10, 2018, 3:25 a.m.">
    <a href="#</a>
    <p>Oct. 10, 2018, 3:25 a.m.</p>
    <p>1</p>
</li>

Here's what my Javascript currently looks like - I found it online and very new to programming in general.

/** 
 * 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-created' at the start.
highlightActive('.btn-sort-created', 'btn-sort--active');
sortByDataAttr('created', '.browse-item', '.browse-list');

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

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

$('.btn-sort-price-highest').on('click', function() {
  highlightActive(this, 'btn-sort--active');
  sortByDataAttr('-price', '.browse-item', '.browse-list')();
});
Win Lin
  • 21
  • 3
  • It's because `"Oct. 10, 2018, 3:25 a.m." - "Dec. 23, 2017, 5:15 p.m."` is `NaN`. You'll have to find another way to compare those dates than a simple `-`. – ibrahim mahrir Oct 15 '18 at 16:37
  • @ibrahimmahrir i see, if i output something more like `10/10/18` will that work? (knowing that items with the same date will not be sorted) – Win Lin Oct 15 '18 at 16:39
  • You are sorting by strings. If you need to sort by date, numbers, etc, you need to code it to convert to those types. – epascarello Oct 15 '18 at 16:39
  • 2
    Can you change your backend to make `data-created` be some other format? The best format would be the same as [`Date.now`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now) (the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC), that way you can still use `-`. Example: `data-created="1529388847"`. – ibrahim mahrir Oct 15 '18 at 16:42
  • @ibrahimmahrir I see, I can see if I can get that to work. How come `-price` doesn't work? – Win Lin Oct 15 '18 at 16:49
  • @WinLin Because there is no data attribute called `-price`. – ibrahim mahrir Oct 15 '18 at 16:51
  • You'll need to pass an argument for direction and just negate the outcome of the calculation (e.g., `return direction == "asc" ? $(a).data(sortCriteria) - $(b).data(sortCriteria) : -($(a).data(sortCriteria) - $(b).data(sortCriteria));`). – Heretic Monkey Oct 15 '18 at 16:53
  • In this context how would I change my code to sort by both descending and ascending `price`? – Win Lin Oct 15 '18 at 16:54
  • Possible duplicate of [jquery sort list based on data attribute value](https://stackoverflow.com/questions/21600802/jquery-sort-list-based-on-data-attribute-value) – Heretic Monkey Oct 15 '18 at 16:54
  • BTW, you should mention that the code you have is a direct copy from [Sorting elements with jQuery using data attributes](https://stackoverflow.com/a/31390513)... – Heretic Monkey Oct 15 '18 at 16:56
  • Have you changed the date format yet? – ibrahim mahrir Oct 15 '18 at 17:06

0 Answers0