Open exaline-ru opened 2 years ago
@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>`;
}
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?