title: Display the search data with filtering
body: <p>I am developing an application with a flight search API (Multicom FindAndBook), which returns the large results based on the given input.</p>
  
  <p>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</p>
  
  <p>1) Filtering the data at client side using jQuery</p>
  
  <p>But here I am filtering the data with jQuery but I am facing difficulty to paginate the filtered data.</p>
  
  <p>2) Making the Ajax request to the server to filter using PHP </p>
  
  <p>But it is taking more time to load the data.</p>
  
  <p>3) Dumping the search results into WebSQL database and filtering the data at client.</p>
  
  <p>Here I can filter the data but is it the proper way to filter data from the local database?</p>
  
  <p>Can anyone tell me which is the proper way to get the high performance?</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>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.</p>
  
  <p>This is the <a href="http://jsfiddle.net/Pzdn3/" rel="nofollow">Fiddle</a> for my jQuery filtering:</p>
  
  <pre><code>$(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 &gt;= minPrice &amp;&amp; price &lt;= 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) &amp;&amp; filterCheckboxes(this);
        }).show();
    }
  });
  </code></pre>