A Pen by Maiah Macariola.

Navigation-Controls.markdown

Navigation Controls

A Pen by Maiah Macariola on CodePen.

License.

script.js

// API
function generateNavigation(totalPages, currentPage, fun) {
    var left = [],
        right = [],
        hidden = [];

    var middle = totalPages / 2;
    var isRightBound = (currentPage - middle) > 0;

    if (isRightBound) {
        var canDisplay = (currentPage + 3) <= totalPages;

        if (canDisplay) {
            for (var i = currentPage; i < (currentPage + 4); i++) {
                right.push(i);
            }

            // show hidden
            for (var j = currentPage - 1; j > 1; j--) {
                hidden.unshift(j);
            }

        // is right most
        } else if (currentPage >= (totalPages - 3)) {
            var temp = null;
            if (totalPages > 3) {
                for (var i = totalPages; i >= (totalPages - 3); i--) {
                    temp = i;
                    right.unshift(i);
                }
            } else {
                for (var i = totalPages; i >= 1; i--) {
                    temp = i;
                    right.unshift(i);
                }
            }

            // show hidden
            for (var j = temp - 1; j > 1; j--) {
                hidden.unshift(j);
            }
        }

        if (totalPages >= 5) {
            if (totalPages === 5) {
                left.push(1);
            } else {
                left.push(1);
            }
        }

    // is left bound
    } else {

        var canDisplay = (currentPage - 3) >= 1;

        if (canDisplay) {
            for (var i = currentPage; i > (currentPage - 4); i--) {
                left.unshift(i);
            }

            // show hidden
            for (var j = currentPage + 1; j < totalPages; j++) {
                hidden.push(j);
            }

        // is left most
        } else if (currentPage <= 4) {
            var temp = null;
            if (totalPages > 3) {
                for (var i = 1; i <= 4; i++) {
                    temp = i;
                    left.push(i);
                }

            } else {
                for (var i = 1; i <= totalPages; i++) {
                    temp = i;
                    left.push(i);
                }
            }

            // show hidden
            for (var j = temp + 1; j < totalPages; j++) {
                hidden.push(j);
            }
        }

        if (totalPages >= 5) {
            if (totalPages === 5) {
                right.push(5);
            } else {
                right.push(totalPages);
            }
        }
    }

    fun.apply(undefined, [left, right, hidden]);
}

function renderPagination(left, right, hidden, currentPage, totalPages, position) {
    var pagination = '';

    // left side pages
    for (var i = 0; i < left.length; i++) {
        var pageNum = left[i];
        var id = position + '-' + pageNum;
        var classAttr = (pageNum === currentPage) ? ' class="active"' : '';
        pagination += ' <a id="' + id + '" href="#"' + classAttr + '>' + pageNum + '</a>';
    }

    // hidden character
    if (hidden.length > 0) {
        pagination += ' <span class="hidden">[...]</span>'
    }

    // right side pages
    for (i = 0; i < right.length; i++) {
        var pageNum = right[i];
        var id = position + '-' + pageNum;
        var classAttr = (pageNum === currentPage) ? ' class="active"' : '';
        pagination += ' <a id="' + id + '" href="#"' + classAttr + '>' + pageNum + '</a>';
    }

    // prev and next links
    if (currentPage !== 1) {
        pagination = '<a href="#" id="' + position + '-prev-' + currentPage + '"><<</a> ' + pagination;
    }
    if (currentPage !== totalPages) {
        pagination += ' <a href="#" id="' + position + '-next-' + currentPage + '">>></a>';
    }

    return '<div id="pagination">' + pagination + '</div>';
}

// Usage
var totalPages = 15,
    currentPage = 8;

generateNavigation(totalPages, currentPage, function (left, right,
    hidden) {
    console.log(left);
    console.log(hidden);
    console.log(right);

    document.body.innerHTML += renderPagination(left, right, hidden, currentPage,
        totalPages, 'bottom');
});

style.css

a {
    text-decoration: none;
    color: green;
    border: solid 1px;
    border-radius: 3px;
    padding: 5px;
}
a.active, a:hover {
    font-weight: bold;
    color: red;
}
span.hidden {
    color: green;
}