在搜索比较中通过jquery在页面内排列搜索结果

时间:2011-11-26 19:14:33

标签: javascript jquery pagination

我正在制作预订比较引擎,我有一个非常敏感的问题。

这笔交易是我有3-4种不同的来源来比较结果。并且每个数据提供者都有自己的API,并且在每种搜索方法中都有另一个分页,因此您可以向他们发送请求:

  • pageSize的
  • PAGENUMBER
  • 搜索参数

你基本上回来了:

  • 搜索结果
  • resultQuantity
  • 使用该给定搜索参数返回的对象数

所以我通过JQuery填充它们。实际上Ajax GET请求被发送到我的

  

www.mysite.com/search_script.php

结果填充。

让我们说:

  1. Source1.com/api.php
  2. Source2.com/api.php
  3. 在我们的网站上,我们需要安排好的分页。说好,我的意思是专业,所以我们不加载太多的浏览器,服务器也有太多的API查询。

    我原以为我可以这样做:

    如果在我的网站中我每页有10个结果的分页,那么我会查询这两个来源,并要求每页发回5个结果。

    但我会遇到两类问题:

    • 第1页返回23 of 2 2nd only 4
      5 + 4,5 + 0,5 + 0 ......

    • 两者都超过5,但是一个比第二个结束,让我们说12和5 5-5,5-0,5 / 0

    • ...

    不是一个好的解决方案......

    这种情况的锻炼是什么?

    第一个是肥皂电话

        SOAP 1.2
    
    The following is a sample SOAP 1.2 request and response. The placeholders shown need to be replaced with actual values.
    
    POST /partnerV3/Webservice.asmx HTTP/1.1
    Host: webservices.interhome.com
    Content-Type: application/soap+xml; charset=utf-8
    Content-Length: length
    
    <?xml version="1.0" encoding="utf-8"?>
    <soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">
      <soap12:Header>
        <ServiceAuthHeader xmlns="http://www.interhome.com/webservice">
          <Username>string</Username>
          <Password>string</Password>
        </ServiceAuthHeader>
      </soap12:Header>
      <soap12:Body>
        <Search xmlns="http://www.interhome.com/webservice">
          <inputValue>
            <Page>int</Page>
            <PageSize>int</PageSize>
            <OrderDirection>NotSet or Ascending or Descending</OrderDirection>
            <OrderBy>NotSet or Favorite or Price or Place</OrderBy>
            <LanguageCode>string</LanguageCode>
            <CurrencyCode>string</CurrencyCode>
            <SalesOfficeCode>string</SalesOfficeCode>
            <Quicksearch>string</Quicksearch>
            <CountryCode>string</CountryCode>
            <RegionCode>string</RegionCode>
            <PlaceCode>string</PlaceCode>
            <CheckIn>string</CheckIn>
            <Duration>int</Duration>
            <ThemeFilter>NotSet or Cheepcheep or Countryside or Familyfriendly or HolidayVillage or LakesAndMountains or Nightlife or Selection or SomewhereQuiet or SummerHoliday or Cities or SuitableForSeniors</ThemeFilter>
            <HouseApartmentType>NotSet or Apartment or DetachedHouse or House</HouseApartmentType>
            <Facilities>
              <Facilities>NotSet or Aircondition or Balcony or BBQ or Cot or Dishwasher or Fireplace or Internet or InternetWiFi or Jacuzzi or LuxuriousFurnishings or ModernFurnishings or NiceKitchen or NiceSourroundings or Parking or LiftsInhouse or NonSmoker or Pets1 or Pets2 or Pets3 or PetsNo or PoolAll or PoolChildren or PoolIndoor or PoolPrivate or Sauna or Swimmingpool or TV or WashingMachine or Wheelchair</Facilities>
              <Facilities>NotSet or Aircondition or Balcony or BBQ or Cot or Dishwasher or Fireplace or Internet or InternetWiFi or Jacuzzi or LuxuriousFurnishings or ModernFurnishings or NiceKitchen or NiceSourroundings or Parking or LiftsInhouse or NonSmoker or Pets1 or Pets2 or Pets3 or PetsNo or PoolAll or PoolChildren or PoolIndoor or PoolPrivate or Sauna or Swimmingpool or TV or WashingMachine or Wheelchair</Facilities>
            </Facilities>
            <Accessibilities>
              <Accessibilities>NotSet or FamilyFrienldy or LiftsInhouse or NonSmoking or PetsWelcome or PetsNotAllowed or SuitableForSeniors or WheelchairAccessible</Accessibilities>
              <Accessibilities>NotSet or FamilyFrienldy or LiftsInhouse or NonSmoking or PetsWelcome or PetsNotAllowed or SuitableForSeniors or WheelchairAccessible</Accessibilities>
            </Accessibilities>
            <Activities>
              <Activities>NotSet or Biking or CrossCountrySkiing or Golfing or Hiking or MountainBiking or Nightlife or NordicWalking or Riding or Sailing or Skiing or Snowboarding or Surfing or Tennis or ThemeParkNearby or Toboggan or Windsurfing or SkiingSnowboarding</Activities>
              <Activities>NotSet or Biking or CrossCountrySkiing or Golfing or Hiking or MountainBiking or Nightlife or NordicWalking or Riding or Sailing or Skiing or Snowboarding or Surfing or Tennis or ThemeParkNearby or Toboggan or Windsurfing or SkiingSnowboarding</Activities>
            </Activities>
            <Situations>
              <Situations>NotSet or ByTheSea or InAHistoricTown or InAMajorCity or InTheCountryside or InALakesideTown or SomewhereQuiet or OnAIsland or Center100 or Center500 or Center1000 or Golf200 or Golf500 or Golf5000 or Lake50 or Lake1000 or Lake10000 or Sea50 or Sea1000 or Sea10000 or Skilift50 or Skilift500 or Skilift10000 or CountryView or LakeView or MountainView or SeaView</Situations>
              <Situations>NotSet or ByTheSea or InAHistoricTown or InAMajorCity or InTheCountryside or InALakesideTown or SomewhereQuiet or OnAIsland or Center100 or Center500 or Center1000 or Golf200 or Golf500 or Golf5000 or Lake50 or Lake1000 or Lake10000 or Sea50 or Sea1000 or Sea10000 or Skilift50 or Skilift500 or Skilift10000 or CountryView or LakeView or MountainView or SeaView</Situations>
            </Situations>
            <PropertyTypes>
              <PropertyTypes>NotSet or Apartment or Bungalow or CastleManor or Chalet or DetachedHouse or Farmhouse or HistoricProperty or HolidayVillage or SpecialProperty or Villa</PropertyTypes>
              <PropertyTypes>NotSet or Apartment or Bungalow or CastleManor or Chalet or DetachedHouse or Farmhouse or HistoricProperty or HolidayVillage or SpecialProperty or Villa</PropertyTypes>
            </PropertyTypes>
            <SpecialOffer>NotSet or AnySpecialOffer or EarlyBooker or LastMinute</SpecialOffer>
            <PaxMin>int</PaxMin>
            <PaxMax>int</PaxMax>
            <RoomsMin>int</RoomsMin>
            <RoomsMax>int</RoomsMax>
            <BedroomsMin>int</BedroomsMin>
            <BedroomsMax>int</BedroomsMax>
            <BathroomsMin>int</BathroomsMin>
            <BathroomsMax>int</BathroomsMax>
            <QualityMin>int</QualityMin>
            <QualityMax>int</QualityMax>
            <DistanceToCenter>int</DistanceToCenter>
            <DistanceToGolfCourse>int</DistanceToGolfCourse>
            <DistanceToLake>int</DistanceToLake>
            <DistanceToSea>int</DistanceToSea>
            <DistanceToSeaOrLake>int</DistanceToSeaOrLake>
            <DistanceToSkiLifts>int</DistanceToSkiLifts>
          </inputValue>
        </Search>
      </soap12:Body>
    </soap12:Envelope>
    HTTP/1.1 200 OK
    Content-Type: application/soap+xml; charset=utf-8
    Content-Length: length
    
    <?xml version="1.0" encoding="utf-8"?>
    <soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">
      <soap12:Body>
        <SearchResponse xmlns="http://www.interhome.com/webservice">
          <SearchResult>
            <ResultCount>int</ResultCount>
            <Items>
              <SearchResultItem>
                <AccommodationCode>string</AccommodationCode>
                <Country>string</Country>
                <CountryCode>string</CountryCode>
                <Region>string</Region>
                <RegionCode>string</RegionCode>
                <Place>string</Place>
                <PlaceCode>string</PlaceCode>
                <Zip>string</Zip>
                <CurrencyCode>string</CurrencyCode>
                <Price>decimal</Price>
                <Quality>int</Quality>
                <Type>string</Type>
                <Pax>int</Pax>
                <Rooms>int</Rooms>
                <BedRooms>int</BedRooms>
                <Pets>int</Pets>
                <Cots>int</Cots>
                <AdditionBeds>int</AdditionBeds>
                <Parking>boolean</Parking>
                <TV>boolean</TV>
                <Dishwasher>boolean</Dishwasher>
                <Washingmachine>boolean</Washingmachine>
                <Aircondition>boolean</Aircondition>
                <Pool>boolean</Pool>
                <Tennis>boolean</Tennis>
                <Sauna>boolean</Sauna>
                <Wheelchair>boolean</Wheelchair>
                <GeoLng>decimal</GeoLng>
                <GeoLat>decimal</GeoLat>
                <InsideDescription>string</InsideDescription>
                <Picture>string</Picture>
              </SearchResultItem>
              <SearchResultItem>
                <AccommodationCode>string</AccommodationCode>
                <Country>string</Country>
                <CountryCode>string</CountryCode>
                <Region>string</Region>
                <RegionCode>string</RegionCode>
                <Place>string</Place>
                <PlaceCode>string</PlaceCode>
                <Zip>string</Zip>
                <CurrencyCode>string</CurrencyCode>
                <Price>decimal</Price>
                <Quality>int</Quality>
                <Type>string</Type>
                <Pax>int</Pax>
                <Rooms>int</Rooms>
                <BedRooms>int</BedRooms>
                <Pets>int</Pets>
                <Cots>int</Cots>
                <AdditionBeds>int</AdditionBeds>
                <Parking>boolean</Parking>
                <TV>boolean</TV>
                <Dishwasher>boolean</Dishwasher>
                <Washingmachine>boolean</Washingmachine>
                <Aircondition>boolean</Aircondition>
                <Pool>boolean</Pool>
                <Tennis>boolean</Tennis>
                <Sauna>boolean</Sauna>
                <Wheelchair>boolean</Wheelchair>
                <GeoLng>decimal</GeoLng>
                <GeoLat>decimal</GeoLat>
                <InsideDescription>string</InsideDescription>
                <Picture>string</Picture>
              </SearchResultItem>
            </Items>
          </SearchResult>
        </SearchResponse>
      </soap12:Body>
    </soap12:Envelope>
    

    ,第二个是相同的......

1 个答案:

答案 0 :(得分:0)

您需要为每个连接创建对象。

此对象将加载加载到数组的内容。它们可以表示为:

function Connection( searchQuery, callback )
{
    var result = []; // use to save what you load
    this.total; // total searching found

    this.getResult = function( start, length, callback ){}; // it's is one of the possibilities.
    // this function should verify if the content is already loaded in result[] or not. If not, load then. There is no problem of loading more then needed.
}

当你得出结论时,它应该以类似的方式工作:

var conn = new Connection( "...", objectIsWorkable ); // load the first XX results and get the total found stuff.
conn.getResult( 0, 5, whenLoaded );

完成这项工作后,你可以做你真正想要的事情:

var pageController = function( queries, callback )
{
    var ITEM_PER_CONNECTION = 5;
    var ITEM_PER_PAGE = 10;
    var conns = []; // used to save all connections
    var pages = []; // use to save the pages to be loaded
    var loaded = 0;

    var onLoadedCallback = callback;

    var totalConnPage;
    var onPageLoadedCallback;
    var tempPage; // the items loaded are saved here.
    var appendToTempPage = function( value )
    {
        for( var i in value ) tempPage.push( value[i] );
        loaded++;
        if( loaded == totalConnPage ) onPageLoadedCallback( tempPage );
    }

    this.loadPage = function( num, callback )
    {
        onPageLoadedCallback = callback;

        loaded = 0;
        tempPage = [];
        totalConnPage = 0;
        var current = pages[num];
        for( var i = 0; i < current.length; i++ )
        {
            if( current[i] != null )
            {
                conns[i].getResult( current[i][0], current[i][1], appendToTempPage );
                totalConnPage++;
            }
        }
    }

    var makePages = function()
    {
        // get the total
        var total = 0;
        var totals = [];
        for( var i in conns )
        {
            total += conns[i].total;
            totals.push( 0 );
        }

        // create the page list
        while( total > 0 )
        {
            var temp = total > ITEMS_PER_PAGE ? ITEMS_PER_PAGE : total;
            total -= temp;
            var page = [];
            var index = 0;
            while( temp > 0 )
            {
                if( totals[index] < conns[index].total )
                {
                    if( conns[index].total - totals[index] >= ITEM_PER_CONNECTION )
                    {
                        var next = temp > ITEM_PER_CONNECTION ? ITEM_PER_CONNECTION : temp;
                        page.push( [totals[index], next] );
                        totals[index] += next;
                        temp -= next;
                    }
                    else
                    {
                        var next = conns[index].total - totals[index];
                        next = next > temp ? temp : next;
                        page.push( [totals[index], next] );
                        totals[index] += next;
                        temp -= next;
                    }
                }
                else
                    page.push( null );


                index++;
            }

            pages.push( page );
        }
    }

    var inited = function()
    {
        pages[loaded] = 0;
        loaded++;

        if( loaded == conns.length )
        {
            makePages();
            onLoadedCallback();
        }
    }

    // init
    for( var i in queries )
        conns.push( new Connection( queries[i], inited ) );
}

最重要的是makePages,可能是你想要做的事情。但是你的问题有点长了,然后我再添加一些东西就不会让人感到困惑。

您可以将makePage更改为以您的方式工作。我们的想法是将所有页面内容保存在pages var。