通过过滤显示搜索数据

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 功能来执行此操作，您应该在将数据显示在 UI 上之前将数据存储在 javascript 变量中。每次您更改过滤器或排序时，都会从原始保​​存的数据创建您的子集。分页很简单，您所要做的就是获取过滤数据子集的总数并渲染页面编号。 Math.ceil(tatalcount/pagesize) 每次点击页面，您都会知道您的数据子集的索引并相应地获取。我只能提供您需要自己编写代码的方法。但如前所述，其他两种方法效率不高。