【问题标题】:Quicksand multiple filtering with sorting带排序的流沙多重过滤
【发布时间】:2013-06-21 21:27:59
【问题描述】:

您好,我正在处理这个 jquery 流沙,我需要使用排序进行多重过滤。我尝试了很多工具,但有些过滤了一些排序,而不是两者,根本没有任何效果。有了这个,我需要添加另一个过滤器(例如:accomodation)。有没有办法做到这一点

jQuery(function($) {
var $filterRegion = $('#filter input[name="region"]');
var $filterSort = $('#filter #sort');

var $applications = $('#listSorting');

var $data = $applications.clone();

$filterRegion.add("#sort").change(function(e) {

  var $sortedValue = $(this).val();

    if ($($filterRegion+':checked').val() == 'all') {
    var $filteredData = $data.find('li');
  } else {
    var $filteredData = $data.find('li[data-region=' + $($filterRegion+":checked").val() + ']');
    if($filteredData.length <= "0"){
        $(".failedFilterResults").html("No data available");
    }
    else{
        $(".failedFilterResults").html("");
    }
  }


 if ($('#filter #sort').val() == "price") {
    var $sortedData = $filteredData.sorted({
      by: function(v) {
        var priceValue = $(v).find('span.currentprice').text();
        priceValue = priceValue.replace('$','');
        return parseFloat(priceValue);
      }
    });
  } else if($('#filter #sort').val() == "name"){
    var $sortedData = $filteredData.sorted({
      by: function(v) {
        return $(v).find('strong').text().toLowerCase();
      }
    });
  }
  else{

  }

  $applications.quicksand($sortedData, {
    duration: 800
  });

});

});

【问题讨论】:

  • 大家好,我也有类似的问题。有人可以帮助我们吗? @Kmanikandan

标签: jquery quicksand


【解决方案1】:

在这里您可以找到我的示例,其中包含两个过滤器和字母排序:

http://jsfiddle.net/AVnzX/

这是我的过滤器设置:

<form id="filter">
<select name="country" id="filterCountry">
    <option value="alle">Alle</option>
    <option value="usa">USA</option>
    <option value="germany">Germany</option>
    <option value="australia">Australia</option>
</select>
<select name="city" id="filterCity">
    <option value="alle">Alle</option>
    <option value="newyork">New York</option>
    <option value="sydney">Sydney</option>
    <option value="paris">Paris</option>
    <option value="munich">Munich</option>
    <option value="berlin">Berlin</option>
    <option value="losangeles">Los Angeles</option>
    <option value="miami">Miami</option>
    <option value="hamburg">Hamburg</option>
    <option value="frankfurt">Frankfurt</option>
    <option value="sanfrancisco">San Francisco</option>
</select>
<select name="alphabet" id="filterName">
    <option value="name">Name</option>
    <option value="country">Country</option>
    <option value="city">City</option>
</select>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多