Изотопная сортировка по определенному имени и по дате - PullRequest
Новая
       30

Изотопная сортировка по определенному имени и по дате

0 голосов
/ 25 октября 2018

У меня есть простой список изотоп с кнопками сортировки: 

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  getSortData: {
    date: function ( itemElem  ) {
              return Date.parse($( itemElem ).find('.date').data('time'));
          },
          popular: function ( itemElem  ) {
              return parseInt($( itemElem ).find('.comment').data('comment'), 10);
          },
          name1: function ( itemElem  ) {
              return $( itemElem ).find('.name1');
          },
          name2: function ( itemElem  ) {
              return $( itemElem ).find('.name2');
          },
          name3: function ( itemElem  ) {
              return $( itemElem ).find('.name3');
          },
  },
  sortAscending: false,
  // sortBy: 'new',
});

// bind sort button click
$('.sort-by-button-group').on( 'click', 'button', function() {
  var sortValue = $(this).attr('data-sort-value');
  $grid.isotope({ sortBy: sortValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});
.element-item {
  border:1px solid #eee;
  width: 100%;
  padding-left: 1rem;
  font-family: monospace;
}

.date {
  display: block;
  color:#777;
  margin-bottom: 1rem;
}

.comment {
  display: block;
  margin-bottom: 1rem;
}

button.is-checked {
  background: #000;
  color: #fff;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
  
  
  
<div class="button-group sort-by-button-group">
  <button class="button is-checked" data-sort-value="original-order">ALL</button>
  <button class="button" data-sort-value="date">New</button>
  <button class="button" data-sort-value="popular">Popular</button>
  <button class="button" data-sort-value="name1">Name 1</button>
  <button class="button" data-sort-value="name2">Name 2</button>
  <button class="button" data-sort-value="name3">Name 3</button>
</div>  
  
  
<div class="grid">
  <div class="element-item " data-category="it 1">
    <h3 class="name name1">Name 1</h3>
    <span class="date" data-time="02-07-2017">02.07.2017</span>
    <span class="comment" data-comment="1">1 comment</span>
  </div>
  <div class="element-item " data-category="it 2">
    <h3 class="name name2">Name 2</h3>
    <span class="date" data-time="01-01-2018T08:23:11">01.01.2018 08:23:11</span>
    <span class="comment" data-comment="20">20 comments</span>
  </div>
  <div class="element-item " data-category="it 3">
    <h3 class="name name3">Name 3</h3>
    <span class="date" data-time="05-07-2017">05.07.2017</span>
    <span class="comment" data-comment="33">33 comments</span>
  </div>
  <div class="element-item " data-category="it 1">
    <h3 class="name name1">Name 1</h3>
    <span class="date" data-time="20-03-2018T08:23:11">20.03.2018 08:23:11</span>
    <span class="comment" data-comment="100">100 comments</span>
  </div>
  <div class="element-item " data-category="it 2">
    <h3 class="name name2">Name 2</h3>
    <span class="date" data-time="14-10-2017">14.10.2017</span>
    <span class="comment" data-comment="5">5 comment</span>
  </div>
  <div class="element-item " data-category="it 3">
    <h3 class="name name3">Name 3</h3>
    <span class="date" data-time="07-06-2018">07.06.2018</span>
    <span class="comment" data-comment="1">1 comment</span>
  </div>
  <div class="element-item " data-category="it 1">
    <h3 class="name name1">Name 1</h3>
    <span class="date" data-time="01-09-2017">01.09.2017</span>
    <span class="comment" data-comment="1">1 comment</span>
  </div>
  <div class="element-item " data-category="it 2">
    <h3 class="name name2">Name 2</h3>
    <span class="date" data-time="11-11-2017">11.11.2017</span>
    <span class="comment" data-comment="3">3 comments</span>
  </div>
  <div class="element-item " data-category="it 3">
    <h3 class="name name3">Name 3</h3>
    <span class="date" data-time="03-04-2018">03.04.2018</span>
    <span class="comment" data-comment="26">26 comments</span>
  </div>
</div>

Вопрос: Как отсортировать список по определенному имени, например, сначала все Name 1, итогда все остальные имена?

Вопрос: Как отсортировать список по формату даты DD-MM-YYTHH:MM:SS, пример 01-01-2018T08:23:11?

Не фильтровать, только сортировать иonly isotope!

PS: Теперь из всех предметов работают только сортировки популярных постов.Сортировка остальных как-то странно работает (не так, как должно быть).

...