archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Search: implemented pagination

Browse Source 
- Got rid of the nasty off-by-one logic in the JavaScript.
- Implemented pagination at the API.
This commit is contained in:
Sybren A. Stüvel
2018-01-10 17:07:21 +01:00
parent 82a2e9a523
commit 61673ef273
6 changed files with 66 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/scripts/elasticsearch.js
View File

@@ -1,5 +1,5 @@
$(document).ready(function() {
var HITS_PER_PAGE = 25;
var HITS_PER_PAGE = 10;
var MAX_VALUES_PER_FACET = 30;
// DOM binding
@@ -174,41 +174,48 @@ $(document).ready(function() {
return;
}
var maxPages = 2;
var nbPages = content.count / HITS_PER_PAGE;
var maxPages = 3;
var nbPages = Math.floor(content.count / HITS_PER_PAGE);
// Process pagination
var pages = [];
if (content.page > maxPages) {
pages.push({
current: false,
number: 1
number: 0,
shownr: 1
});
// They don't really add much...
// pages.push({ current: false, number: '...', disabled: true });
}
for (var p = content.page - maxPages; p < content.page + maxPages; ++p) {
if (p < 0 || p >= nbPages) {
if (p < 0 || p > nbPages) {
continue;
}
pages.push({
current: content.page === p,
number: (p + 1)
number: p,
shownr: p+1
});
}
if (content.page + maxPages < nbPages) {
// They don't really add much...
// pages.push({ current: false, number: '...', disabled: true });
pages.push({
current: false,
number: nbPages
number: nbPages-1,
shownr: nbPages
});
}
console.log('showing page', content.page);
var pagination = {
pages: pages,
prev_page: (content.page > 0 ? content.page : false),
next_page: (content.page + 1 < nbPages ? content.page + 2 : false)
};
if (content.page > 0) {
pagination.prev_page = {page: content.page - 1};
}
if (content.page < nbPages) {
pagination.next_page = {page: content.page + 1};
}
console.log('next page', pagination.next_page);
console.log('prev page', pagination.prev_page);
console.log('nbPages', nbPages);
// Display pagination
$pagination.html(paginationTemplate.render(pagination));
}
@@ -230,7 +237,10 @@ $(document).ready(function() {
});
$(document).on('click', '.gotoPage', function() {
//helper.setCurrentPage(+$(this).data('page') - 1).search();
const page_idx = $(this).data('page');
search.setCurrentPage(page_idx);
search.execute();
$("html, body").animate({
scrollTop: 0
}, '500', 'swing');

3
src/styles/_search.sass
View File

@@ -248,7 +248,8 @@ $search-hit-width_grid: 100px
opacity: .6
&.active a
color: white
color: $color-text-dark-primary
font-weight: bold
#search-list
width: 40%

6
src/templates/nodes/search.pug
View File

@@ -155,11 +155,11 @@ script(type="text/template", id="hit-template")
// Pagination template
script(type="text/template", id="pagination-template")
ul.search-pagination.
<li {{^prev_page}}class="disabled"{{/prev_page}}><a href="#" {{#prev_page}} class="gotoPage" data-page="{{ prev_page }}" {{/prev_page}}><i class="pi-angle-left"></i></a></li>
<li {{^prev_page}}class="disabled"{{/prev_page}}><a href="#" {{#prev_page}} class="gotoPage" data-page="{{ prev_page.page }}" {{/prev_page}}><i class="pi-angle-left"></i></a></li>
{{#pages}}
<li class="{{#current}}active{{/current}}{{#disabled}}disabled{{/disabled}}"><a href="#" {{^disabled}} class="gotoPage" data-page="{{ number }}" {{/disabled}}>{{ number }}</a></li>
<li class="{{#current}}active{{/current}}{{#disabled}}disabled{{/disabled}}"><a href="#" {{^disabled}} class="gotoPage" data-page="{{ number }}" {{/disabled}}>{{ shownr }}</a></li>
{{/pages}}
<li {{^next_page}}class="disabled"{{/next_page}}><a href="#" {{#next_page}} class="gotoPage" data-page="{{ next_page }}" {{/next_page}}><i class="pi-angle-right"></i></a></li>
<li {{^next_page}}class="disabled"{{/next_page}}><a href="#" {{#next_page}} class="gotoPage" data-page="{{ page }}" {{/next_page}}><i class="pi-angle-right"></i></a></li>
// Stats template
script(type="text/template", id="stats-template")

6
src/templates/users/index.pug
View File

@@ -78,11 +78,11 @@ script(type="text/template", id="hit-template")
// Pagination template
script(type="text/template", id="pagination-template")
ul.search-pagination.
<li {{^prev_page}}class="disabled"{{/prev_page}}><a href="#" {{#prev_page}} class="gotoPage" data-page="{{ prev_page }}" {{/prev_page}}><i class="pi-angle-left"></i></a></li>
<li {{^prev_page}}class="disabled"{{/prev_page}}><a href="#" {{#prev_page}} class="gotoPage" data-page="{{ page }}" {{/prev_page}}><i class="pi-angle-left"></i></a></li>
{{#pages}}
<li class="{{#current}}active{{/current}}{{#disabled}}disabled{{/disabled}}"><a href="#" {{^disabled}} class="gotoPage" data-page="{{ number }}" {{/disabled}}>{{ number }}</a></li>
<li class="{{#current}}active{{/current}}{{#disabled}}disabled{{/disabled}}"><a href="#" {{^disabled}} class="gotoPage" data-page="{{ number }}" {{/disabled}}>{{ shownr }}</a></li>
{{/pages}}
<li {{^next_page}}class="disabled"{{/next_page}}><a href="#" {{#next_page}} class="gotoPage" data-page="{{ next_page }}" {{/next_page}}><i class="pi-angle-right"></i></a></li>
<li {{^next_page}}class="disabled"{{/next_page}}><a href="#" {{#next_page}} class="gotoPage" data-page="{{ page }}" {{/next_page}}><i class="pi-angle-right"></i></a></li>
// Stats template
script(type="text/template", id="stats-template")