Udostępnij za pośrednictwem


Samouczek: dodawanie stronicowania do wyników wyszukiwania przy użyciu zestawu SDK platformy .NET

Dowiedz się, jak zaimplementować dwa różne systemy stronicowania, pierwszy na podstawie numerów stron i drugi na nieskończonym przewijaniu. Oba systemy stronicowania są powszechnie używane, a wybór odpowiedniego zależy od doświadczenia użytkownika, jakie chciałbyś uzyskać z wynikami.

Z tego samouczka dowiesz się, jak wykonywać następujące działania:

  • Rozszerz swoją aplikację o numerowane stronicowanie
  • Rozszerzanie aplikacji przy użyciu nieskończonego przewijania

Przegląd

Ten samouczek nakłada system stronicowania na wcześniej utworzony projekt opisany w samouczku Tworzenie pierwszej aplikacji wyszukiwania .

Gotowe wersje kodu, które zostaną opracowane w tym samouczku, można znaleźć w następujących projektach:

Wymagania wstępne

Rozszerz swoją aplikację z numerowanym stronicowaniem

Stronicowanie numerowane to wybrany system stronicowania dla głównych komercyjnych wyszukiwarek internetowych i wielu innych witryn internetowych wyszukiwania. Stronicowanie numerowane zwykle zawiera opcję "następna" i "poprzednia" oprócz zakresu rzeczywistych numerów stron. Dostępna może być również opcja "pierwsza strona" i "ostatnia strona". Te opcje z pewnością zapewniają użytkownikowi kontrolę nad nawigowaniem po wynikach opartych na stronach.

W tym samouczku dodasz system zawierający pierwsze, poprzednie, następne i ostatnie opcje wraz z numerami stron, które nie zaczynają się od 1, ale zamiast tego otaczają bieżącą stronę, na której znajduje się użytkownik (na przykład jeśli użytkownik patrzy na stronę 10, być może numery stron 8, 9, 10, 11 i 12).

System będzie wystarczająco elastyczny, aby umożliwić ustawienie liczby widocznych numerów stron w zmiennej globalnej.

System będzie traktować skrajne po lewej i prawej stronie przyciski numerów stron jako specjalne, co oznacza, że będą wyzwalać zmianę zakresu wyświetlanych numerów stron. Jeśli na przykład zostaną wyświetlone numery stron 8, 9, 10, 11 i 12, a użytkownik kliknie wartość 8, wówczas zakres wyświetlanych numerów stron zmieni się na 6, 7, 8, 9 i 10. I jest podobne przesunięcie ku prawej, jeśli wybrano liczbę 12.

Dodaj pola stronicowania do modelu

Otwórz podstawowe rozwiązanie strony wyszukiwania.

  1. Otwórz plik modelu SearchData.cs.

  2. Dodaj zmienne globalne, aby obsługiwać stronicowanie. W mvC zmienne globalne są deklarowane we własnej klasie statycznej. ResultsPerPage ustawia liczbę wyników na stronę. MaxPageRange określa liczbę widocznych numerów stron w widoku. PageRangeDelta określa, ile stron ma być przesuniętych w lewo lub w prawo, gdy wybrany zostanie skrajnie lewy lub skrajnie prawy numer strony. Zazwyczaj ta ostatnia liczba wynosi około połowy elementu MaxPageRange. Dodaj następujący kod do przestrzeni nazw.

    public static class GlobalVariables
    {
        public static int ResultsPerPage
        {
            get
            {
                return 3;
            }
        }
        public static int MaxPageRange
        {
            get
            {
                return 5;
            }
        }
    
        public static int PageRangeDelta
        {
            get
            {
                return 2;
            }
        }
    }
    

    Wskazówka

    Jeśli uruchamiasz ten projekt na urządzeniu z mniejszym ekranem, takim jak laptop, rozważ zmianę elementu ResultsPerPage na 2.

  3. Dodaj właściwości stronicowania do klasy SearchData po właściwości searchText .

    // The current page being displayed.
    public int currentPage { get; set; }
    
    // The total number of pages of results.
    public int pageCount { get; set; }
    
    // The left-most page number to display.
    public int leftMostPage { get; set; }
    
    // The number of page numbers to display - which can be less than MaxPageRange towards the end of the results.
    public int pageRange { get; set; }
    
    // Used when page numbers, or next or prev buttons, have been selected.
    public string paging { get; set; }
    

Dodawanie tabeli opcji stronicowania do widoku

  1. Otwórz plik index.cshtml i dodaj następujący kod bezpośrednio przed zamykającym <tagiem /body> . Ten nowy kod przedstawia tabelę opcji stronicowania: pierwsza, poprzednia, 1, 2, 3, 4, 5, następna, ostatnia.

    @if (Model != null && Model.pageCount > 1)
    {
    // If there is more than one page of results, show the paging buttons.
    <table>
        <tr>
            <td>
                @if (Model.currentPage > 0)
                {
                    <p class="pageButton">
                        @Html.ActionLink("|<", "Page", "Home", new { paging = "0" }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">|&lt;</p>
                }
            </td>
    
            <td>
                @if (Model.currentPage > 0)
                {
                    <p class="pageButton">
                        @Html.ActionLink("<", "PageAsync", "Home", new { paging = "prev" }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">&lt;</p>
                }
            </td>
    
            @for (var pn = Model.leftMostPage; pn < Model.leftMostPage + Model.pageRange; pn++)
            {
                <td>
                    @if (Model.currentPage == pn)
                    {
                        // Convert displayed page numbers to 1-based and not 0-based.
                        <p class="pageSelected">@(pn + 1)</p>
                    }
                    else
                    {
                        <p class="pageButton">
                            @Html.ActionLink((pn + 1).ToString(), "PageAsync", "Home", new { paging = @pn }, null)
                        </p>
                    }
                </td>
            }
    
            <td>
                @if (Model.currentPage < Model.pageCount - 1)
                {
                    <p class="pageButton">
                        @Html.ActionLink(">", "PageAsync", "Home", new { paging = "next" }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">&gt;</p>
                }
            </td>
    
            <td>
                @if (Model.currentPage < Model.pageCount - 1)
                {
                    <p class="pageButton">
                        @Html.ActionLink(">|", "PageAsync", "Home", new { paging = Model.pageCount - 1 }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">&gt;|</p>
                }
            </td>
        </tr>
    </table>
    }
    

    Używamy tabeli HTML, aby dokładnie wyrównać elementy. Jednak wszystkie akcje pochodzą z instrukcji @Html.ActionLink , z których każdy wywołuje kontroler z nowym modelem utworzonym z różnymi wpisami we właściwości stronicowania , którą dodaliśmy wcześniej.

    Opcje pierwszej i ostatniej strony nie wysyłają ciągów, takich jak "first" i "last", ale zamiast tego wysyłają poprawne numery stron.

  2. Dodaj klasy stronicowania do listy stylów HTML w pliku hotels.css. Klasa pageSelected służy do identyfikowania bieżącej strony (stosując pogrubiony format do numeru strony) na liście numerów stron.

    .pageButton {
        border: none;
        color: darkblue;
        font-weight: normal;
        width: 50px;
    }
    
    .pageSelected {
        border: none;
        color: black;
        font-weight: bold;
        width: 50px;
    }
    
    .pageButtonDisabled {
        border: none;
        color: lightgray;
        font-weight: bold;
        width: 50px;
    }
    

Dodaj akcję strona do kontrolera

  1. Otwórz plik HomeController.cs i dodaj akcję PageAsync . Ta akcja odpowiada na dowolną wybraną opcję strony.

    public async Task<ActionResult> PageAsync(SearchData model)
    {
        try
        {
            int page;
    
            switch (model.paging)
            {
                case "prev":
                    page = (int)TempData["page"] - 1;
                    break;
    
                case "next":
                    page = (int)TempData["page"] + 1;
                    break;
    
                default:
                    page = int.Parse(model.paging);
                    break;
            }
    
            // Recover the leftMostPage.
            int leftMostPage = (int)TempData["leftMostPage"];
    
            // Recover the search text and search for the data for the new page.
            model.searchText = TempData["searchfor"].ToString();
    
            await RunQueryAsync(model, page, leftMostPage);
    
            // Ensure Temp data is stored for next call, as TempData only stores for one call.
            TempData["page"] = (object)page;
            TempData["searchfor"] = model.searchText;
            TempData["leftMostPage"] = model.leftMostPage;
        }
    
        catch
        {
            return View("Error", new ErrorViewModel { RequestId = "2" });
        }
        return View("Index", model);
    }
    

    Metoda RunQueryAsync wyświetli teraz błąd składniowy z powodu trzeciego parametru, do którego przejdziemy nieco.

    Uwaga / Notatka

    Wywołania metody TempData przechowują wartość ( obiekt) w magazynie tymczasowym, ale ten magazyn jest utrwalany tylko dla jednego wywołania. Jeśli zapiszemy coś w danych tymczasowych, będą one dostępne dla następnego wywołania akcji kontrolera, ale na pewno znikną po następnym wywołaniu. Ze względu na tę krótką żywotność, przy każdym wywołaniu PageAsync ponownie przechowujemy tekst wyszukiwania i właściwości stronicowania w magazynie tymczasowym.

  2. Zaktualizuj akcję Indeks (model), aby przechowywać zmienne tymczasowe, i dodać parametr strony z lewej strony do wywołania RunQueryAsync .

    public async Task<ActionResult> Index(SearchData model)
    {
        try
        {
            // Ensure the search string is valid.
            if (model.searchText == null)
            {
                model.searchText = "";
            }
    
            // Make the search call for the first page.
            await RunQueryAsync(model, 0, 0);
    
            // Ensure temporary data is stored for the next call.
            TempData["page"] = 0;
            TempData["leftMostPage"] = 0;
            TempData["searchfor"] = model.searchText;
        }
    
        catch
        {
            return View("Error", new ErrorViewModel { RequestId = "1" });
        }
        return View(model);
    }
    
  3. Metoda RunQueryAsync , wprowadzona w poprzedniej lekcji, wymaga modyfikacji w celu rozwiązania błędu składni. Używamy pól Skip, Size i IncludeTotalCount klasy SearchOptions , aby zażądać tylko jednej strony wartości wyników, zaczynając od ustawienia Pomiń . Musimy również obliczyć zmienne stronicowania dla naszego widoku. Zastąp całą metodę następującym kodem.

    private async Task<ActionResult> RunQueryAsync(SearchData model, int page, int leftMostPage)
    {
        InitSearch();
    
        var options = new SearchOptions
        {
            // Skip past results that have already been returned.
            Skip = page * GlobalVariables.ResultsPerPage,
    
            // Take only the next page worth of results.
            Size = GlobalVariables.ResultsPerPage,
    
            // Include the total number of results.
            IncludeTotalCount = true
        };
    
        // Add fields to include in the search results.
        options.Select.Add("HotelName");
        options.Select.Add("Description");
    
        // For efficiency, the search call should be asynchronous, so use SearchAsync rather than Search.
        model.resultList = await _searchClient.SearchAsync<Hotel>(model.searchText, options).ConfigureAwait(false);
    
        // This variable communicates the total number of pages to the view.
        model.pageCount = ((int)model.resultList.TotalCount + GlobalVariables.ResultsPerPage - 1) / GlobalVariables.ResultsPerPage;
    
        // This variable communicates the page number being displayed to the view.
        model.currentPage = page;
    
        // Calculate the range of page numbers to display.
        if (page == 0)
        {
            leftMostPage = 0;
        }
        else if (page <= leftMostPage)
        {
            // Trigger a switch to a lower page range.
            leftMostPage = Math.Max(page - GlobalVariables.PageRangeDelta, 0);
        }
        else if (page >= leftMostPage + GlobalVariables.MaxPageRange - 1)
        {
            // Trigger a switch to a higher page range.
            leftMostPage = Math.Min(page - GlobalVariables.PageRangeDelta, model.pageCount - GlobalVariables.MaxPageRange);
        }
        model.leftMostPage = leftMostPage;
    
        // Calculate the number of page numbers to display.
        model.pageRange = Math.Min(model.pageCount - leftMostPage, GlobalVariables.MaxPageRange);
    
        return View("Index", model);
    }
    
  4. Na koniec wprowadź niewielką zmianę w widoku. Zmienna resultList.Results.TotalCount będzie teraz zawierać liczbę wyników zwróconych na jednej stronie (3 w naszym przykładzie), a nie całkowitą liczbę. Ponieważ ustawiliśmy właściwość IncludeTotalCount na wartość true, zmienna resultList.TotalCount zawiera teraz łączną liczbę wyników. Zlokalizuj więc miejsce wyświetlania wyników w widoku i zmień go na następujący kod.

    // Show the result count.
    <p class="sampleText">
        @Model.resultList.TotalCount Results
    </p>
    
    var results = Model.resultList.GetResults().ToList();
    
    @for (var i = 0; i < results.Count; i++)
    {
        // Display the hotel name and description.
        @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" })
        @Html.TextArea($"desc{1}", results[i].Document.Description, new { @class = "box2" })
    }
    

    Uwaga / Notatka

    Występuje nieznaczny spadek wydajności, gdy ustawisz IncludeTotalCount na true, ponieważ ta suma musi zostać obliczona przez usługę Azure Cognitive Search. W przypadku złożonych zestawów danych istnieje ostrzeżenie, że zwracana wartość jest przybliżeniem. Ponieważ korpus wyszukiwania hoteli jest mały, dlatego będzie dokładny.

Kompilowanie i uruchamianie aplikacji

Teraz wybierz pozycję Rozpocznij bez debugowania (lub naciśnij F5).

  1. Wyszukaj ciąg, który zwraca mnóstwo wyników (na przykład "wifi"). Czy możesz starannie stronicować wyniki?

    Ponumerowane stronicowanie za pośrednictwem wyników

  2. Spróbuj kliknąć na najbardziej skrajny prawy, a później na najbardziej skrajny lewy numer strony. Czy numery stron są odpowiednio dostosowywane, aby wyśrodkować stronę, na której się znajdują?

  3. Czy opcje "first" i "last" są przydatne? Niektóre komercyjne wyszukiwarki używają tych opcji, a inne nie.

  4. Przejdź do ostatniej strony wyników. Ostatnia strona to jedyna strona, która może zawierać mniej niż wyniki ResultsPerPage .

    Przeglądanie ostatniej strony

  5. Wpisz "miasto" i kliknij "wyszukaj". Nie są wyświetlane żadne opcje stronicowania, jeśli wyniki są mniejsze niż jedna strona.

    Wyszukiwanie

Zapisz ten projekt i przejdź do następnej sekcji, aby uzyskać alternatywną formę stronicowania.

Rozszerzanie aplikacji przy użyciu nieskończonego przewijania

Nieskończone przewijanie jest wyzwalane, gdy użytkownik przewija pionowy pasek przewijania do ostatniego wyświetlanego wyniku. W tym przypadku wywołanie usługi wyszukiwania jest wykonywane dla następnej strony wyników. Jeśli nie ma więcej wyników, nic nie zostanie zwrócone, a pionowy pasek przewijania nie zmieni się. Jeśli istnieje więcej wyników, zostaną one dołączone do bieżącej strony, a pasek przewijania zmieni się, aby pokazać, że są dostępne więcej wyników.

Ważną kwestią do zapamiętania jest to, że bieżąca strona nie została zamieniona, ale raczej rozszerzona w celu wyświetlenia dodatkowych wyników. Użytkownik może zawsze przewijać z powrotem do pierwszych wyników wyszukiwania.

Aby zaimplementować nieskończone przewijanie, zacznijmy od projektu sprzed dodania jakichkolwiek elementów przewijania stron. W usłudze GitHub jest to rozwiązanie FirstAzureSearchApp .

Dodaj pola stronicowania do modelu

  1. Najpierw dodaj właściwość stronicowania do klasy SearchData (w pliku modelu SearchData.cs).

    // Record if the next page is requested.
    public string paging { get; set; }
    

    Ta zmienna jest ciągiem, który zawiera ciąg "dalej", jeśli powinna zostać wysłana następna strona wyników lub ma wartość null dla pierwszej strony wyszukiwania.

  2. W tym samym pliku i w przestrzeni nazw dodaj globalną klasę zmiennych z jedną właściwością. W mvC zmienne globalne są deklarowane we własnej klasie statycznej. ResultsPerPage ustawia liczbę wyników na stronę.

    public static class GlobalVariables
    {
        public static int ResultsPerPage
        {
            get
            {
                return 3;
            }
        }
    }
    

Dodawanie pionowego paska przewijania do widoku

  1. Znajdź sekcję pliku index.cshtml, który wyświetla wyniki (rozpoczyna się od @if (Model != null)).

  2. Zastąp sekcję poniższym kodem. Nowa <sekcja div> znajduje się wokół obszaru, który powinien być przewijany i dodaje zarówno atrybut overflow-y , jak i wywołanie funkcji onscroll o nazwie "scrolled()", na przykład.

    @if (Model != null)
    {
        // Show the result count.
        <p class="sampleText">
            @Model.resultList.TotalCount Results
        </p>
    
        var results = Model.resultList.GetResults().ToList();
    
        <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()">
    
            <!-- Show the hotel data. -->
            @for (var i = 0; i < results.Count; i++)
            {
                // Display the hotel name and description.
                @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" })
                @Html.TextArea($"desc{i}", results[i].Document.Description, new { @class = "box2" })
            }
    
  3. Bezpośrednio pod pętlą, po tagu </div>, dodaj funkcję przewijanie.

    <script>
        function scrolled() {
            if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
                $.getJSON("/Home/NextAsync", function (data) {
                    var div = document.getElementById('myDiv');
    
                    // Append the returned data to the current list of hotels.
                    for (var i = 0; i < data.length; i += 2) {
                        div.innerHTML += '\n<textarea class="box1">' + data[i] + '</textarea>';
                        div.innerHTML += '\n<textarea class="box2">' + data[i + 1] + '</textarea>';
                    }
                });
            }
        }
    </script>
    

    Instrukcja if w powyższym skrypcie sprawdza, czy użytkownik przewinął do końca pionowego paska przewijania. Jeśli tak, wywołanie kontrolera home jest wykonywane do akcji o nazwie NextAsync. Kontroler nie potrzebuje żadnych innych informacji, ale zwróci następną stronę danych. Te dane są następnie formatowane przy użyciu identycznych stylów HTML jako oryginalnej strony. Jeśli żadne wyniki nie są zwracane, nic nie jest dołączane i rzeczy pozostają tak, jak są.

Wykonaj następną akcję

Istnieją tylko trzy akcje, które należy wysłać do kontrolera: pierwsze uruchomienie aplikacji, która wywołuje indeks(), pierwsze wyszukiwanie przez użytkownika, które wywołuje indeks (model), a następnie kolejne wywołuje więcej wyników za pośrednictwem metody Next(model).

  1. Otwórz plik kontrolera głównego i usuń metodę RunQueryAsync z oryginalnego samouczka.

  2. Zastąp akcję Index(model) następującym kodem. Teraz obsługuje pole stronicowania, gdy jest równe null lub ustawione na "next", oraz obsługuje wywołanie usługi Azure Cognitive Search.

    public async Task<ActionResult> Index(SearchData model)
    {
        try
        {
            InitSearch();
    
            int page;
    
            if (model.paging != null && model.paging == "next")
            {
                // Increment the page.
                page = (int)TempData["page"] + 1;
    
                // Recover the search text.
                model.searchText = TempData["searchfor"].ToString();
            }
            else
            {
                // First call. Check for valid text input.
                if (model.searchText == null)
                {
                    model.searchText = "";
                }
                page = 0;
            }
    
            // Setup the search parameters.
            var options = new SearchOptions
            {
                SearchMode = SearchMode.All,
    
                // Skip past results that have already been returned.
                Skip = page * GlobalVariables.ResultsPerPage,
    
                // Take only the next page worth of results.
                Size = GlobalVariables.ResultsPerPage,
    
                // Include the total number of results.
                IncludeTotalCount = true
            };
    
            // Specify which fields to include in results.
            options.Select.Add("HotelName");
            options.Select.Add("Description");
    
            // For efficiency, the search call should be asynchronous, so use SearchAsync rather than Search.
            model.resultList = await _searchClient.SearchAsync<Hotel>(model.searchText, options).ConfigureAwait(false);               
    
            // Ensure TempData is stored for the next call.
            TempData["page"] = page;
            TempData["searchfor"] = model.searchText;
        }
        catch
        {
            return View("Error", new ErrorViewModel { RequestId = "1" });
        }
    
        return View("Index", model);
    }
    

    Podobnie jak w przypadku metody stronicowania numerowanego, używamy ustawień wyszukiwania Pomiń i Rozmiar, aby uzyskać tylko potrzebne dane.

  3. Dodaj akcję NextAsync do kontrolera macierzystego. Zwróć uwagę, jak zwraca listę, każdy hotel dodaje dwa elementy do listy: nazwę hotelu i opis hotelu. Ten format jest ustawiony tak, aby odpowiadać sposobowi używania zwróconych danych przez funkcję przewijania w widoku.

    public async Task<ActionResult> NextAsync(SearchData model)
    {
        // Set the next page setting, and call the Index(model) action.
        model.paging = "next";
        await Index(model).ConfigureAwait(false);
    
        // Create an empty list.
        var nextHotels = new List<string>();
    
        // Add a hotel name, then description, to the list.
        await foreach (var searchResult in model.resultList.GetResultsAsync())
        {
            nextHotels.Add(searchResult.Document.HotelName);
            nextHotels.Add(searchResult.Document.Description);
        }
    
        // Rather than return a view, return the list of data.
        return new JsonResult(nextHotels);
    }
    
  4. Jeśli wystąpi błąd składniowy w List<string>, dodaj następującą dyrektywę using na początku pliku kontrolera.

    using System.Collections.Generic;
    

Kompilowanie i uruchamianie projektu

Teraz wybierz pozycję Rozpocznij bez debugowania (lub naciśnij F5).

  1. Wprowadź termin, który zapewni mnóstwo wyników (na przykład "basen"), a następnie przetestuj pionowy pasek przewijania. Czy wyzwala nową stronę wyników?

    Nieskończone przewijanie wyników

    Wskazówka

    Aby upewnić się, że na pierwszej stronie pojawi się pasek przewijania, pierwsza strona wyników musi nieznacznie przekroczyć wysokość wyświetlanego obszaru. W naszym przykładzie pole .box1 ma wysokość 30 pikseli, pole .box2 ma wysokość 100 pikseli i dolny margines 24 pikseli. Każdy wpis używa więc 154 pikseli. Trzy wpisy zajmują 3 x 154 = 462 piksele. Aby upewnić się, że zostanie wyświetlony pionowy pasek przewijania, należy ustawić wysokość obszaru wyświetlania na mniejszą niż 462 piksele; działa nawet wysokość 461 pikseli. Ten problem występuje tylko na pierwszej stronie, po tym, jak na pewno pojawi się pasek przewijania. Wiersz do aktualizacji to: <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()">.

  2. Przewiń w dół do dołu wyników. Zwróć uwagę, że wszystkie informacje są teraz na stronie jednego widoku. Możesz przewinąć całą drogę do góry bez wyzwalania wywołań serwera.

Bardziej zaawansowane nieskończone systemy przewijania mogą używać kółka myszy lub podobnego innego mechanizmu, aby wyzwolić ładowanie nowej strony wyników. Nie będziemy kontynuować nieskończonego przewijania w tych samouczkach, ale ma to pewien urok, ponieważ unika dodatkowych kliknięć myszy i możesz chcieć rozważyć dalsze badanie innych opcji.

Wnioski

Rozważ następujące wnioski z tego projektu:

  • Stronicowanie numerowane jest przydatne w przypadku wyszukiwań, w których kolejność wyników jest nieco dowolna, co oznacza, że użytkownicy mogą zainteresować się kolejnymi stronami.
  • Nieskończone przewijanie jest przydatne, gdy kolejność wyników jest szczególnie ważna. Jeśli na przykład wyniki są uporządkowane w odległości od centrum miasta docelowego.
  • Stronicowanie numerowane umożliwia lepszą nawigację. Na przykład użytkownik może zapamiętać, że interesujący wynik znajdował się na stronie 6, podczas gdy w przypadku ciągłego przewijania nie ma tak łatwego odwołania.
  • Nieskończone przewijanie łatwo przyciąga, umożliwiając przewijanie w górę i w dół bez konieczności klikania numerów stron.
  • Kluczową funkcją nieskończonego przewijania jest to, że wyniki są dołączane do istniejącej strony, a nie zastępują tej strony, co jest wydajne.
  • Pamięć tymczasowa jest utrwalana tylko dla jednego wywołania i musi zostać zresetowana, aby mogła przetrwać dodatkowe wywołania.

Dalsze kroki

Stronicowanie ma podstawowe znaczenie dla doświadczenia podczas wyszukiwania. Gdy stronicowanie jest dobrze omówione, następnym krokiem jest dalsze ulepszanie środowiska użytkownika przez dodanie wyszukiwania z podpowiedziami.