Question

我正在使用航班搜索API（Multicom FindAndBook）开发一个应用程序，它根据给定的输入返回大的结果。

我的问题是如何过滤返回的数据（价格，到达时间，出发时间，停止次数和航空公司名称）？我找到了三种过滤解决方案

1）使用jQuery在客户端过滤数据

但是我在这里使用jQuery过滤数据但是我很难对过滤后的数据进行分页。

2）向服务器发出Ajax请求以使用PHP进行过滤

但是加载数据需要更多时间。

3）将搜索结果转储到WebSQL数据库并在客户端过滤数据。

这里我可以过滤数据但是从本地数据库过滤数据的正确方法是什么？

谁能告诉我哪种方法能够获得高性能？

修改：

API不提供过滤，但每次过滤请求需要花费很多时间（最多30秒）。我决定更好地获取所有搜索数据并对结果数据进行过滤。

这是我的jQuery过滤的Fiddle：

$(function () {
  var minPrice = 299,
      maxPrice = 1099,
      $filter_lists = $("#filters ul"),
      $filter_checkboxes = $("#filters :checkbox"),
      $items = $("#computers li.system");

  $filter_checkboxes.click(filterSystem);

  $('#slider-container').slider({
      range: true,
      min: minPrice,
      max: maxPrice,
      values: [minPrice, maxPrice],
      slide: function (event, ui) {
          $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
          minPrice = ui.values[0];
          maxPrice = ui.values[1];
          filterSystem();
      }
  });
  $("#amount").val("$" + minPrice + " - $" + maxPrice);

  function filterSlider(elem) {
      var price = parseInt($(elem).data("price"), 10);
      console.log(price);
      return price >= minPrice && price <= maxPrice;
  }

  function filterCheckboxes(elem) {
      var $elem = $(elem),
          passAllFilters = true;
      $filter_lists.each(function () {
          var classes = $(this).find(':checkbox:checked').map(function () {
              return $(this).val();
          }).get();
          console.log('classes', classes);
          var passThisFilter = false;
          $.each(classes, function (index, item) {
              if ($elem.hasClass(item)) {
                  console.log('hasClass', item);
                  passThisFilter = true;
                  return false; //stop inner loop
              }
          });
          if (!passThisFilter) {
              passAllFilters = false;
              return false; //stop outer loop
          }
      });
      return passAllFilters;
  }

  function filterSystem() {
      $items.hide().filter(function () {
          return filterSlider(this) && filterCheckboxes(this);
      }).show();
  }
});

Answer 1

我会选择第一个选项并使其正常运行。其他两个是实现可以通过简单的JavaScript实现的东西的黑客。如果没有默认的jquery功能来执行此操作我怀疑，您应该将数据存储在javascript变量中，然后再在UI上显示它。每次更改过滤器或排序时，都会从原始保存的数据中创建子集。分页很简单，您只需获取过滤数据子集的总数和呈现页面数。 Math.ceil（tatalcount / pagesize）与每个页面点击你会知道你的子数据集的索引和相应的提取。我只能提供您自己编码所需的方法。但正如其他两个方法效率不高。

使用过滤显示搜索数据

1 个答案: