Please advise on how to perform pagination
Solved! Go to Solution.
Views
Replies
Total Likes
Hi
You can implement it in the below way :
With below example, when you add a component to the page you would be able to display A list of pages with Pagination. You can fine tune the example as per your needs.
Sling Model - To create a list of pages
JS - To implement the Pagination Logic
Sightly - To render the data.
@Model(adaptables = SlingHttpServletRequest.class) public class HelloWorldModel { private final Logger logger = LoggerFactory.getLogger(getClass()); @Inject SlingHttpServletRequest request; private String message; private String sel = null; private List<SimplePage> pageList = null; SimplePage page = null; private List<String> file; @Inject @Source("osgi-services") PaginationInterface service; @PostConstruct protected void init() { try { pageList = new ArrayList<SimplePage>(); Session session = request.getResource().getResourceResolver() .adaptTo(Session.class); ValueMap node = request.getResource().getValueMap(); String path = node.get("text", String.class); if (request != null) { List<String> selectors = Arrays.asList(request .getRequestPathInfo().getSelectors()); if (selectors.size() > 0) this.sel = selectors.get(0); else this.sel = "0"; this.file = service.getPaginationData(path, String.valueOf(5), this.sel); this.message = service.getMatches(); for (String s : this.file) { page = new SimplePage(); String title = session.getNode(s + "/jcr:content") .getProperty("jcr:title").getString(); page.setPath(s); page.setTitle(title); pageList.add(page); } } } catch (Exception e) { logger.info("Exception:" + e.getMessage()); } } public List<String> getFiles() { return this.file; } public String getMessage() { return this.message; } public List<SimplePage> getPage() { return this.pageList; } }
--------------------------------Sightly ------------------------------------------------
<div data-sly-test="${!properties.header || !properties.text}" >
<h3 class="author">Please author values in dialog</h3>
</div>
<div data-sly-test="${properties.header && properties.text}" >
<h3>${properties.header}</h3>
<p data-sly-use.hello="com.sightlypagination.core.models.HelloWorldModel">
<ul data-sly-list.items="${hello.page}">
<li><a href="${items.path}" target="_blank" >${items.title}
</a>
</li>
</ul>
</p>
<div data-sly-use.d="${ 'sightly-pagination.js' @ matches=hello.message}">
<div data-sly-test="${d.check}">
<a class="nextprevious" data-sly-test="${d.previous!=''}" href="${currentPage.path @ addSelectors=d.previous}.html"> Previous </a>
<div class="pages" data-sly-list.val="${d.pages}">
<a href="${ '{0}.{1}.html' @ format=[currentPage.path,val[0]]}"> ${val[1]} </a>
</div>
<a class="nextprevious" data-sly-test="${d.next!=''}" href="${currentPage.path @ addSelectors=d.next}.html"> Next </a>
</div>
<div data-sly-test="${!d.check}">
<p class="error">Invalid selector for pagination..!!</p>
</div>
</div>
</div>
---------------------------------JS ---------------------------------------------------
"use strict";
use(function() {
try {
// setting the limit
var limit = 5;
var m = parseInt(this.matches);
var offset, p = "", next, pages;
var selectors = new Array();
var pages = new Array();
selectors = request.getRequestPathInfo().getSelectors();
// Getting Selector
if (selectors.length != 0)
var sel = parseInt(selectors[0]);
else
var sel = 0;
var maxSel = parseInt(m / 5 + 1) - 1;
maxSel = Math.floor(maxSel - 1);
if (maxSel == -1)
maxSel = 0;
log.info("Max Selector " + maxSel);
// Previous Link
if (sel != 0 && sel < m / 5 + 1) {
p = parseInt(sel) - 1;
}
// Next link
if ((sel + 1) * 5 > m) {
next = "";
} else {
next = parseInt(sel) + 1;
}
// Need to find 5 links including adjacent links and current one
var fcount = 0;
var bcount = 0;
var flimit = 2;
var blimit = 2;
if (maxSel - sel >= 2) {
var blimit = 2;
} else {
flimit = parseInt(flimit)
+ (parseInt(blimit) - (parseInt(maxSel) - parseInt(sel)));
log.info(flimit);
blimit = maxSel - sel;
}
if (parseInt(sel) - 0 < 2) {
blimit = blimit + flimit - parseInt(sel) - 0;
}
// Front
for (i = sel - 1; i >= 0; i--) {
if (fcount != flimit) {
log.info(fcount);
pages[fcount] = i;
fcount++;
}
}
for (i = parseInt(sel) + 1; i <= maxSel; i++) {
log.info("i=" + i);
if (bcount != blimit) {
pages[bcount + fcount] = i;
bcount++;
}
}
log.info(pages.length)
pages[pages.length] = parseInt(sel);
var list = [];
for (var n = 0; n < pages.length; n++) {
var x = parseInt(pages[n]);
list[n] = x;
// }
}
list.sort(function(a, b) {
return a - b
});
for (var n = 0; n < list.length; n++) {
log.info(list[n])
log.info(isNaN(list[n]));
}
var pageList = new Array();
for (var n = 0; n < list.length; n++) {
var link = [];
var x = parseInt(list[n]) + 1;
link[0] = list[n].toString();
link[1] = x.toString();
list[n] = link;
}
// Check for invalid pagination
var valid = true;
if (parseInt(sel) > parseInt(maxSel))
valid = false;
// Removing single element is it has only one page
if (list.length == 1)
list.pop();
return {
previous : p.toString(),
next : next.toString(),
pages : list,
check : valid
};
} catch (e) {
log.info(e);
}
});
@Sanjana12 you can use pagination from the front-end using JS based on the json result from the backend logic.
sample example for ref. http://jsfiddle.net/Lzp0dw83/
Hope this helps.
Hi
You can implement it in the below way :
With below example, when you add a component to the page you would be able to display A list of pages with Pagination. You can fine tune the example as per your needs.
Sling Model - To create a list of pages
JS - To implement the Pagination Logic
Sightly - To render the data.
@Model(adaptables = SlingHttpServletRequest.class) public class HelloWorldModel { private final Logger logger = LoggerFactory.getLogger(getClass()); @Inject SlingHttpServletRequest request; private String message; private String sel = null; private List<SimplePage> pageList = null; SimplePage page = null; private List<String> file; @Inject @Source("osgi-services") PaginationInterface service; @PostConstruct protected void init() { try { pageList = new ArrayList<SimplePage>(); Session session = request.getResource().getResourceResolver() .adaptTo(Session.class); ValueMap node = request.getResource().getValueMap(); String path = node.get("text", String.class); if (request != null) { List<String> selectors = Arrays.asList(request .getRequestPathInfo().getSelectors()); if (selectors.size() > 0) this.sel = selectors.get(0); else this.sel = "0"; this.file = service.getPaginationData(path, String.valueOf(5), this.sel); this.message = service.getMatches(); for (String s : this.file) { page = new SimplePage(); String title = session.getNode(s + "/jcr:content") .getProperty("jcr:title").getString(); page.setPath(s); page.setTitle(title); pageList.add(page); } } } catch (Exception e) { logger.info("Exception:" + e.getMessage()); } } public List<String> getFiles() { return this.file; } public String getMessage() { return this.message; } public List<SimplePage> getPage() { return this.pageList; } }
--------------------------------Sightly ------------------------------------------------
<div data-sly-test="${!properties.header || !properties.text}" >
<h3 class="author">Please author values in dialog</h3>
</div>
<div data-sly-test="${properties.header && properties.text}" >
<h3>${properties.header}</h3>
<p data-sly-use.hello="com.sightlypagination.core.models.HelloWorldModel">
<ul data-sly-list.items="${hello.page}">
<li><a href="${items.path}" target="_blank" >${items.title}
</a>
</li>
</ul>
</p>
<div data-sly-use.d="${ 'sightly-pagination.js' @ matches=hello.message}">
<div data-sly-test="${d.check}">
<a class="nextprevious" data-sly-test="${d.previous!=''}" href="${currentPage.path @ addSelectors=d.previous}.html"> Previous </a>
<div class="pages" data-sly-list.val="${d.pages}">
<a href="${ '{0}.{1}.html' @ format=[currentPage.path,val[0]]}"> ${val[1]} </a>
</div>
<a class="nextprevious" data-sly-test="${d.next!=''}" href="${currentPage.path @ addSelectors=d.next}.html"> Next </a>
</div>
<div data-sly-test="${!d.check}">
<p class="error">Invalid selector for pagination..!!</p>
</div>
</div>
</div>
---------------------------------JS ---------------------------------------------------
"use strict";
use(function() {
try {
// setting the limit
var limit = 5;
var m = parseInt(this.matches);
var offset, p = "", next, pages;
var selectors = new Array();
var pages = new Array();
selectors = request.getRequestPathInfo().getSelectors();
// Getting Selector
if (selectors.length != 0)
var sel = parseInt(selectors[0]);
else
var sel = 0;
var maxSel = parseInt(m / 5 + 1) - 1;
maxSel = Math.floor(maxSel - 1);
if (maxSel == -1)
maxSel = 0;
log.info("Max Selector " + maxSel);
// Previous Link
if (sel != 0 && sel < m / 5 + 1) {
p = parseInt(sel) - 1;
}
// Next link
if ((sel + 1) * 5 > m) {
next = "";
} else {
next = parseInt(sel) + 1;
}
// Need to find 5 links including adjacent links and current one
var fcount = 0;
var bcount = 0;
var flimit = 2;
var blimit = 2;
if (maxSel - sel >= 2) {
var blimit = 2;
} else {
flimit = parseInt(flimit)
+ (parseInt(blimit) - (parseInt(maxSel) - parseInt(sel)));
log.info(flimit);
blimit = maxSel - sel;
}
if (parseInt(sel) - 0 < 2) {
blimit = blimit + flimit - parseInt(sel) - 0;
}
// Front
for (i = sel - 1; i >= 0; i--) {
if (fcount != flimit) {
log.info(fcount);
pages[fcount] = i;
fcount++;
}
}
for (i = parseInt(sel) + 1; i <= maxSel; i++) {
log.info("i=" + i);
if (bcount != blimit) {
pages[bcount + fcount] = i;
bcount++;
}
}
log.info(pages.length)
pages[pages.length] = parseInt(sel);
var list = [];
for (var n = 0; n < pages.length; n++) {
var x = parseInt(pages[n]);
list[n] = x;
// }
}
list.sort(function(a, b) {
return a - b
});
for (var n = 0; n < list.length; n++) {
log.info(list[n])
log.info(isNaN(list[n]));
}
var pageList = new Array();
for (var n = 0; n < list.length; n++) {
var link = [];
var x = parseInt(list[n]) + 1;
link[0] = list[n].toString();
link[1] = x.toString();
list[n] = link;
}
// Check for invalid pagination
var valid = true;
if (parseInt(sel) > parseInt(maxSel))
valid = false;
// Removing single element is it has only one page
if (list.length == 1)
list.pop();
return {
previous : p.toString(),
next : next.toString(),
pages : list,
check : valid
};
} catch (e) {
log.info(e);
}
});