jQuery Isotope过滤器不按日期排序

dphi5xsq  于 2023-06-05  发布在  jQuery
关注(0)|答案(1)|浏览(736)

有没有人知道https://isotope.metafizzy.co/
我试着按他们最后发布的日期排序,但排序不正确。今天,昨天,还有几个月。
html

<div id="GROUP-<!-- |g_id| -->" class="ml-item ml-mem group-<!-- |g_id| -->" data-category="group-<!-- |g_id| -->" data-id="<!-- |id| -->">

<span class="lastposted"><!-- |last_post| --></span>

<button data-sort-value="lastposted">last posted by</button>

下面是Isotope代码:

// store filter for each group
var buttonFilters = {};
var buttonFilter = '*:not(.group-1, .group-3)';
// store filter for each group
var filters = {};
// quick search regex
var qsRegex;
var fcRegex;

// init Isotope
var $grid = $('.member-list').isotope({
  itemSelector: '.ml-item',
  layoutMode: 'fitRows',
    fitRows: {
         gutter: 5      
},

 getSortData: {
    name: '.name',
    faceclaim: '.faceclaim',
    posts: '.posts parseInt',
    group: '[data-category]',
    lastposted:'[data-id] parseInt', 
    alias: '.alias'
 },

  sortAscending: {
    name: true,
    posts: false,
    lastposted: true,
    group: true,
    faceclaim: true,
    alias: true
  },
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $(this).find('.name').text().match( qsRegex ) : true;
    var fcResult = fcRegex ? $(this).find('.faceclaim').text().match( fcRegex ) : true;
    var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
    return searchResult && fcResult && buttonResult;
 }
  });        

// bind filter button click
$('.filter-button-group').on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  buttonFilters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  buttonFilter = concatValues( buttonFilters );
  // Isotope arrange
  $grid.isotope();
  updateFilterCount();
});

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

// bind filter button click
$('.button').on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  buttonFilters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  buttonFilter = concatValues( buttonFilters );
  // Isotope arrange
  $grid.isotope();
  updateFilterCount();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $grid.isotope();
}) );
// use value of search field to filter
var $fcsearch = $('.fcsearch').keyup( debounce( function() {
  fcRegex = new RegExp( $fcsearch.val(), 'gi' );
  $grid.isotope();
}) );

// 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');
  });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout( timeout );
    var args = arguments;
    var _this = this;
    function delayed() {
      fn.apply( _this, args );
    }
    timeout = setTimeout( delayed, threshold );
  };

}

它是混乱的(2023年4月2日)或(今天/昨天与时间),并以随机顺序排序。我试过parseDate,然后转移到[data-id] parseInt,这让我最接近。有什么想法从这里去哪里?

yvgpqqbh

yvgpqqbh1#

Isotope的getSortData要求值要么是一个快捷字符串,要么是一个回调函数来检索数据。由于日期的格式多种多样,不易解析,因此必须使用回调函数。
下面是一个函数,它应该能够对你给出的例子中的日期进行排序('May 25,2023','Today at 11:22pm','Yesterday at 1:15pm'):

let parseDate = function(s) {
    let r = null // assume
    console.log('Parsing ' + s)
    // let yesterday = new Date().setDate(new Date().getDate() - 1).toDateString();

    tries = [ s, s.replace(/^Yesterday at/, yesterday + ', ').replace(/([0-9])(am|pm)$/, '$1 $2'), s.replace(/^Today at/, today + ', ').replace(/([0-9])(am|pm)$/, '$1 $2') ]
    for ( i=0; i < tries.length; i++ ) {
        let s2 = tries[i]
        console.log( '  Considering ' + s2)

        r = Date.parse(s2)
        if ( ! isNaN(r) ) {
            console.log( '    success with Date.parse(' + s2 + ')')
            break
        }

        const dt = new Date(s2)
        if (dt instanceof Date && !isNaN(dt)) {
            r = dt.getTime()
            if ( r ) {
                console.log( '    success with new Date(' + s2 + ')')
                break;
            }
        }
    }

    if (isNaN(r) || r === null ) {
        console.log('ERROR parsing')
    }

    console.log('returning ' + r);
    return r;
}

它尝试使用Javascript的Date() constructorDate.parse()函数来解析日期字符串,沿着使用一些字符串操作来将前导的“Today at”或“Yesterday at”替换为实际日期。它还在结尾的'am'或'pm'之前放置一个空格,因为这是Date.parse()的要求。
我留下了console.log()调用,以便您可以看到它所采取的步骤以及成功或失败的地方。
将其与getSortData对象结合:

getSortData: {
    name: '.name',
    faceclaim: '.faceclaim',
    posts: '.posts parseInt',
    group: '[data-category]',
    lastposted: parseDate, 
    alias: '.alias'
},

相关问题