Hello all!
Amazing what you can do by digging around in the Skuid API.
I’ve needed to re-jig Skuid’s pagination for a Lightning Community and thought I’d post a first-draft of my efforts here in case anyone wants to build their own and wanted a place to start.
Feedback welcomed. The main missing element is how to set the current page size of the table/deck (e.g. 5, 10, 50, Show All) - would some kind Skuid-person please point me in the right direction? I’d be terribly grateful 
I’m sure there are some horribly bits in my code. Sorry…
To get it to work (in Lightning):
- Add a template component (allowing HTML) with the following content:
<div class="pager">
<div class="pager-controls">
<a class="pager-first" href="#">First</a>
<a class="pager-prev" href="#">Previous</a>
<ul class="pager-items">
</ul>
<a class="pager-next" href="#">Next</a>
<a class="pager-last" href="#">Last</a>
</div>
<div class="pager-summary"></div>
</div>
- create an in-line Snippet and set an action to trigger it once the page has rendered. Update the first few lines of the snippet with your table/deck’s Id and the Id of the above template:
var params = argumentsa0],
$ = skuid.$;
// PUT YOUR DECK/COMPONENT ID HERE
var componentId = "sk-289F-538";
// PUT YOUR DECK/COMPONENT ID HERE
var templateId = "sk-2IJF-1157";
// Set some variables
var componentList = skuid.$C(componentId).list;
var componentModel = componentList.model;
var listLength = componentModel.data.length;
var currentPage = componentList.currentPage + 1;
var currentPageSize = componentList.currentPageSize;
var totalPages = Math.ceil(listLength / currentPageSize);
// This function resets the pagination with each page change
function setPagination() {
// Remove the current page number list
$('#' + templateId + ' ul.pager-items li').remove();
// Appen the new page number list items
for (var i = 0; i < totalPages; i++) {
var pageNumber = i + 1;
if (currentPage == pageNumber) {
$('#' + templateId + ' ul.pager-items').append("<li>" + pageNumber + "</li>");
} else {
$('#' + templateId + ' ul.pager-items').append("<li><a href='#'>" + pageNumber + "</a></li>");
}
}
// Get the 'from number' and 'to number' values (e.g. for "From 1-10 Records")
var fromNumber = (currentPage - 1) * currentPageSize + 1;
var toNumber;
if(currentPage == totalPages) {
toNumber = listLength;
} else {
toNumber = ((currentPage - 1) * currentPageSize) + currentPageSize;
}
// Hide/show the next/first prev/last buttons based on current page. Alternatively, apply a class with addClass()
if (currentPage != totalPages) {
$('#' + templateId + ' a.pager-last').show();
$('#' + templateId + ' a.pager-next').show();
} else {
$('#' + templateId + ' a.pager-last').hide();
$('#' + templateId + ' a.pager-next').hide();
}
if (currentPage != 1) {
$('#' + templateId + ' a.pager-first').show();
$('#' + templateId + ' a.pager-prev').show();
} else {
$('#' + templateId + ' a.pager-first').hide();
$('#' + templateId + ' a.pager-prev').hide();
}
// Generate the summary text
$('#' + templateId + ' .pager-summary').text("Showing " + fromNumber + " – " + toNumber + " of " + listLength);
}
// This function sets the new page number
function goToPage(pageNumber) {
pageNumber = pageNumber - 1;
componentList.goToPage(pageNumber);
currentPage = pageNumber + 1;
setPagination();
}
// Action - navigate to selected page number
$('#' + templateId + ' ul.pager-items').on('click','li a',function (event){
event.preventDefault();
var selectedPage = $(this).text();
goToPage(selectedPage);
});
// Action - go to first page
$('#' + templateId + ' a.pager-first').on('click', function (event){
event.preventDefault();
goToPage(1);
});
// Action - go to last page
$('#' + templateId + ' a.pager-last').on('click', function (event){
event.preventDefault();
console.log(totalPages);
goToPage(totalPages);
});
// Action - go to next page
$('#' + templateId + ' a.pager-next').on('click', function (event){
event.preventDefault();
var nextPage = currentPage + 1;
goToPage(nextPage);
});
// Action - go to previous page
$('#' + templateId + ' a.pager-prev').on('click', function (event){
event.preventDefault();
var prevPage = currentPage - 1;
goToPage(prevPage);
});
// Initialise page list:
setPagination();
And add some css:
.pager {
font-size: 18px;
margin-top: 20px;
margin-bottom: 20px;
}
@media (min-width: 641px) {
.pager {
margin-top: 25px;
margin-bottom: 25px;
}
}
.pager-items {
display: none
}
@media (min-width: 641px) {
.pager-items {
display: inline
}
.pager-items li {
display: inline;
margin: 0 5px
}
.pager-items li:first-child {
margin-left: 0
}
.pager-items li:last-child {
margin-right: 0
}
}
.pager-last,
.pager-first,
.pager-prev,
.pager-next {
margin-right: 10px
}
span.inactive {
color: #A1A1A1;
}
@media (min-width: 641px) {
.pager-prev,
.pager-next {
margin-right: 0
}
.pager-prev {
margin-right: 10px
}
.pager-next {
margin-left: 10px
}
.pager-first {
margin-right: 20px
}
.pager-last {
margin-left: 20px
}
.pager-controls {
float: right
}
}
/* This hides these options so script on page can selectively show */
.pager-first,
.pager-prev,
.pager-next,
.pager-last {
display: none;
}
