JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="http://luis-almeida.github.com/jPages/js/jPages.js"></script>
<!-- Nº of items per page form -->
<form>

    <label>items per page: </label>
    <select id="combo">
        <option>3</option>
        <option>5</option>
        <option>10</option>
    </select>
</form>

<!-- navigation holder -->
<div class="holder" id="holder">
</div>

<!-- item container -->
<ul id="itemContainer">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

<!--               -->

<!-- Nº of items per page form -->
<form>

    <label>items per page: </label>
    <select id="combo2">
        <option>3</option>
        <option>5</option>
        <option>10</option>
    </select>
</form>

<!-- navigation holder -->
<div class="holder" id="holder2">
</div>

<!-- item container -->
<ul id="itemContainer2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

CSS

.holder {
    margin:15px 0;
}
.holder a {
    font-size:12px;
    cursor:pointer;
    margin:0 5px;
    color:#333;
}
.holder a:hover {
    background-color:#222;
    color:#fff;
}
.holder a.jp-previous {
    margin-right:15px;
}
.holder a.jp-next {
    margin-left:15px;
}
.holder a.jp-current,a.jp-current:hover {
    color:#FF4242;
    font-weight:bold;
}
.holder a.jp-disabled,a.jp-disabled:hover {
    color:#bbb;
}
.holder a.jp-current,a.jp-current:hover,.holder a.jp-disabled,a.jp-disabled:hover {
    cursor:default;
    background:none;
}
.holder span {
    margin:0 5px;
}
form {
    float:right;
    margin-right:10px;
}
form label {
    margin-right: 5px;
}

JavaScript

/* when document is ready */
$(function() {
    /* initiate plugin */
    $("#holder").jPages({
        containerID : "itemContainer",
        perPage : 3
    });
    
    /* on select change */
    $("#combo").change(function(){
        /* get new nº of items per page */
        var newPerPage = parseInt( $(this).val() );
        
        /* destroy jPages and initiate plugin again */
        $("#holder").jPages("destroy").jPages({
            containerID   : "itemContainer",
            perPage       : newPerPage
        });
    });
    
    $("#holder2").jPages({
        containerID : "itemContainer2",
        perPage : 3
    });
    
    /* on select change */
    $("#combo2").change(function(){
        /* get new nº of items per page */
        var newPerPage = parseInt( $(this).val() );
        
        /* destroy jPages and initiate plugin again */
        $("#holder2").jPages("destroy").jPages({
            containerID   : "itemContainer2",
            perPage       : newPerPage
        });
    });
});