Custom pagination for table/deck

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):

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

2. 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 = arguments[0],
    $ = 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;
}