paginator

simple paginator with jquery

HTML

<button id="first">First</button>
<button id="prev">Prev</button>
<button id="next">Next</button>
<button id="last">Last</button>

Rows: <select type="text" id="step"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select>

<div>Showing <span id="showStart"></span> through <span id="showEnd"></span> of <span id="showTotal"></span>

CSS

button{
    border:0;
    color: #0062ae;
    cursor: pointer;
    background-color: #fff;
    
    margin:0; padding: 10px;
}
button[disabled], button[disabled]:hover{
    cursor: default;
    color: #9e9f9b;
    text-decoration: none;
}
button:hover{
    text-decoration: underline;
}

JavaScript

var total = 100325;
var start = 0;
var step = 10;

console.log(total - (total%step));

updateTotals();

function disableButtons(){
    if(start>=step){
        $('#first').removeAttr('disabled');
        $('#prev').removeAttr('disabled');
    }
    else{
        $('#first').attr('disabled', 'disabled');
        $('#prev').attr('disabled', 'disabled');
    }
    if(start+step<total){
        $('#next').removeAttr('disabled');
        $('#last').removeAttr('disabled');
    }
    else{
        $('#next').attr('disabled', 'disabled');
        $('#last').attr('disabled', 'disabled');
    }
    
}
function updateTotals(){
    disableButtons();
    $('#showStart').html(start+1);
    $('#showEnd').html(total<start+step ? total : start+step);
    $('#showTotal').html(total);
}

$('#step').on('change', function(){
    step = parseInt($(this).val());
    updateTotals();
});

$('#first').on('click', function(){
    if(start>=step){
        start = 0;
        updateTotals();
    }
});
$('#prev').on('click', function(){
    if(start>=step){
       start = start-step;
        updateTotals();
    }
});
$('#next').on('click', function(){
    if(start+step<total){
        start = start + step;
        updateTotals();
    }
});
$('#last').on('click', function(){
    if(start+step<total){
        start = total - (total%step);
        updateTotals();
    }
});