使用过滤显示搜索数据

Question

I am developing an application with a flight search API (Multicom FindAndBook), which returns the large results based on the given input.

My problem is how can I filter the returned data (Price, Arrival Time, Departure Time, Number of Stops and Airline Name) ? I found the three solutions for the filtering

1) Filtering the data at client side using jQuery

But here I am filtering the data with jQuery but I am facing difficulty to paginate the filtered data.

2) Making the Ajax request to the server to filter using PHP

But it is taking more time to load the data.

3) Dumping the search results into WebSQL database and filtering the data at client.

Here I can filter the data but is it the proper way to filter data from the local database?

Can anyone tell me which is the proper way to get the high performance?

Edit:

The API is not providing the filtering but it is taking much time for every filter request (up to 30 sec). I decided that better to get the all the search data and do the filtering on the result data.

This is the Fiddle for my jQuery filtering:

$(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

I would go with 1st option and make it work. Other two are kind of hacks to achieve something that can be achieved in plain javascript. If there is no default jquery feature to do this which i doubt, You should store your data in javascript variable before displaying it on UI. Every time you change filters or sorting create your subset from original saved data. Pagination is simple all you have to do is get the total count of your subset of filtered data and render page nos. Math.ceil(tatalcount/pagesize) with each page click you would know the index of your subsuet of data and fetch acvordingly. I can only provide approach you need to code it yourself. But as isaid other two approches are not efficient.