Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

How to perform pagination

Avatar

Level 5

Please advise on how to perform pagination

1 Accepted Solution

Avatar

Correct answer by
Level 5

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

 

 

 

View solution in original post

2 Replies

Avatar

Community Advisor

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

Avatar

Correct answer by
Level 5

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