JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div data-paginate="3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

<hr />

<div data-paginate="1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

SCSS

*{
    font-family: monospace;
}

.p-disabled{
    color: #bbb;
}

[data-paginate] {
    position: relative;
    .p-page-wrap {
        display: none;
        &.p-active-page{
            display: block;
        }
    }
}

JavaScript

/**
 * Front end pagination
 */
var mmpage = mmpage || {};
mmpage.init = function () {
    $('[data-paginate]').each(function (i, e) {
        var pp = parseInt($(this).data('paginate'));
        if (pp > 0) {
            mmpage.setup(e, pp);
        }
    });
}
mmpage.setup = function (e, pp) {
    var grabHtml = [],
        ni = 0,
        n = 0;
    $(e).children().each(function () {
        if (n >= pp) {
            n = 0;
            ni++;
        }
        if (n == 0) {
            grabHtml[ni] = [];
        }
        grabHtml[ni][n] = $(this)[0].outerHTML;
        n++;
    });
    if (ni > 0) {
        $(e).html('');
        for (var c = 0; c < grabHtml.length; c++) {
            var aStr = '';
            for (var d = 0; d < grabHtml[c].length; d++) {
                aStr += grabHtml[c][d];
            }
            $(e).append($('<div/>').addClass('p-page-wrap').html(aStr));
        }
        $(e).attr('data-currentpage', 1);
        $(e).attr('data-pagecount', ni);
        mmpage.controls.showPage(e, 1);
        mmpage.controls.build(e);
    }
}
mmpage.controls = mmpage.controls || {};
mmpage.controls.build = function (e) {
    $(e).append($('<button/>').addClass('p-prev-page unbound').html('Previous'));
    $(e).append($('<button/>').addClass('p-next-page unbound').html('Next'));
    mmpage.controls.bindEvents();
    mmpage.controls.check(e);
}
mmpage.controls.bindEvents = function () {
    $('.p-prev-page.unbound').each(function(){
        $(this).removeClass('unbound').click(function(e){
            e.preventDefault();
            if(!$(this).hasClass('p-disabled')){
	            mmpage.controls.prevPage($(this).parent());
            }
    	    mmpage.controls.check($(this).parent());
        });
    });
    $('.p-next-page.unbound').each(function(){
        $(this).removeClass('unbound').click(function(e){
            e.preventDefault();
            if(!$(this).hasClass('p-disabled')){
	            mmpage.controls.nextPage($(this).parent());
     ...