Gravatar for ahmedokour86@gmail.com

Question by aokour, Sep 8, 2015 7:57 AM

Changing Page size on search page

Hi, Previously i have asked how to give the user an option to change the page size directly from Search page, right now i have a drop down where the user can choose to change Page size (5,10, 20, 50, 100, 200), With your help previously i added the following code:

 Coveo.$('#search').on('buildingQuery', function (e, data) {
    if (data && data.queryBuilder) {

        if($('#ddPageSize').val()!=null && $('#ddPageSize').val()!='')
        {
            data.queryBuilder.numberOfResults = $('#ddPageSize').val();
            data.queryBuilder.firstResult = ($('.CoveoPager').coveo().currentPage - 1) * ( $('#ddPageSize').val());

            $("#search").coveo('state', 'first',($('.CoveoPager').coveo().currentPage - 1) * ( $('#ddPageSize').val()));
            //$('.CoveoPager').coveo('setPage',2)
            //$("#search").coveo('state', 'page')
        }
});

The results are coming correctly with correct number of results based on the selection, However, the pager component is showing incorrect current page.

Example, Default page size is 10, the user select page size from drop down = 50, The results come back on first page from 1-50, which is correct, now if the user select page "2", the results will start from 51-100, which also correct, But the pager shows the current page = 6, which is incorrect, see below:

alt text

Environment Details:

Coveo For Sitecore : August Release 2015

CES/Search API : August Release 2015

1 Reply
Gravatar for jflheureux@coveo.com

Answer by Jean-François L'Heureux, Sep 8, 2015 3:13 PM

Hi Ahmed,

Instead of changing the queryBuilder numberOfResults and firstResult or the state, you could try to change the resultsPerPage property of the QueryController (see Query Controller) like this:

var queryController = Coveo.$("#search").coveo(Coveo.Controllers.QueryController).queryController;
queryController.options.resultsPerPage = $('#ddPageSize').val();
queryController.executeQuery();

We use this method on one of our demo website with success. It may work for you too.

Additionally, I think you shouldn't try to keep the first displayed result the same as before the page size change because you can have inconsistent first page. If the page size was 10 and the user was on page 2, the results 11-20 were displayed. If the user change the page size to 50, your code will display the results 11-60 and stay on page 2. What will happen when the user clicks on the first page?

Ask a question