Pagination for search page

[exaline-ru]

As the search results is a very long list I'd like to use pagination, but this is not a collection. Is there a method for paging the results of a search?

[jevgenijs-jefimovs]

@exaline-ru

Add the "search-paging-wrapper" to search.njk:

...
<div id="info" class="text-center mb-5 mx-auto text-lg text-slate-600"></div>
<div id="wrapper" class="flex flex-wrap -mx-2"></div>
<div id="search-paging-wrapper" class="mt-3 flow-root"></div>

Add the "const pagingWrapperEl..." to search.js:

  render(query) {
    const wrapperEl = document.getElementById('wrapper');
    const searchBoxEl = document.getElementById('searchbox');
    const infoEl = document.getElementById('info');
    const pagingWrapperEl = document.getElementById('search-paging-wrapper');

Clear the content of pagingWrapperEl:

    searchBoxEl.value = query;
    wrapperEl.innerHTML = '';
    pagingWrapperEl.innerHTML = '';

Add the Previous and Next buttons to pagingWrapperEl:

    slicedPosts.forEach((post) => {
    ...
    });

    if (offset > 0) {
        const newStart = offset - size + 1 > 0 ? offset - size + 1 : 1;
        const newUrl = `?q=${query}&start=${newStart}&size=${size}`;
        pagingWrapperEl.innerHTML += `<a href="` + newUrl + `" class="float-left bg-white font-semibold py-2 px-4 border rounded shadow-md text-slate-800 cursor-pointer hover:bg-slate-100">Previous</a>`;
    } else {
        pagingWrapperEl.innerHTML += `<a href="javascript:void(0)" class="float-left bg-white font-semibold py-2 px-4 border rounded shadow-md text-slate-800 cursor-default text-opacity-50">Previous</a>`;
    }

    if (lastPostIndex < matchedPosts.length) {
        const newStart = offset + size + 1;
        const newUrl = `?q=${query}&start=${newStart}&size=${size}`;
        pagingWrapperEl.innerHTML += `<a href="` + newUrl + `" class="float-right bg-white font-semibold py-2 px-4 border rounded shadow-md text-slate-800 cursor-pointer hover:bg-slate-100">Next</a>`;
    } else {
        pagingWrapperEl.innerHTML += `<a href="javascript:void(0)" class="float-right bg-white font-semibold py-2 px-4 border rounded shadow-md text-slate-800 cursor-default text-opacity-50">Next</a>`;
    }