How to perform pagination

[Sanjana12]

Please advise on how to perform pagination

[Manu_Mathew_]

@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.

[ksh_ingole7 · Accepted solution]

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);
}
});