<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="text-center" id="buttons">
</div>
</div>
<style>
goto(15, 900, 0, 15, 'buttons');
</style>
.dropdown span.dropdown-menu {
border-radius:4px;
box-shadow:none;
margin-bottom: 14px;
width:230px;
}
.dropdown span.dropdown-menu:before {
content: "";
border-top: 10px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
bottom: -10px;
right: 7px;
z-index: 14;
}
.dropdown span.dropdown-menu:after {
content: "";
border-top: 12px solid #ccc;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
position: absolute;
bottom: -12px;
right: 5px;
z-index: 9;
}
.btn{
margin: 2px;
}
/*
* Created by Nsamba Vincent Paxton
* On 20th June 2016
*/
/***
* @param {string(html id)} w where to be applied (id).
* @param {integer} i initial minimum value/default
* @param {integer} s size of full array in php
* @param {start} f start from which page
* @param {end} t end to which page
* @returns {undefined}
*
* var nb=0;
*/
var nb=0;
var gotonumber = function (b) {
$("#currentbtn").removeClass("btn-primary").addClass("btn-default").removeAttr("id");
b.attr({"id": "currentbtn"}).addClass("btn-primary").removeClass("btn-default");
console.log(b.text());
if(parseInt(b.text())>=9 && parseInt(b.text())<nb){
$("#btn-sep").addClass("btn-primary").removeClass("btn-default");
}else{
$("#btn-sep").removeClass("btn-primary").addClass("btn-default");
}
console.log(nb);
};
var goto = function (i, s, f, t, w) {
if (parseInt(s) > i) {
//divide s by n n see how many buttons to add
nb = s / i;
if ((s % i) !== 0) {
nb++;
nb = parseInt(nb);
}
console.log("nb: " + nb + " rem: " + (s % i));
$("#" + w).append("<button style='margin-right:5px;' onclick='gotonumber($(this));' class='btn btn-xs btn-primary' id='currentbtn'>1</button>");
if (nb <= 10) {
//construct 10 static buttons
for (var x = 2; x <= nb; x++) {
$("#" + w).append("<button style='margin-right:5px;' onclick='gotonumber($(this));' class='btn btn-xs btn-default'>" + x + "</button>");
}
} else {
//thats where the logic is
for (var x = 2; x <= nb; x++) {
if (x === 9) {
var d = document;
var outerSpan = d.createElement("span");
outerSpan.setAttribute("class", "dropdown dropup");
var btnToggle = d.createElement("button");
btnToggle.setAttribute("class", "dropdown-toggle btn btn-xs btn-default");
btnToggle.setAttribute("data-toggle", "dropdown");
btnToggle.setAttribute("id", "btn-sep");
btnToggle.innerHTML = "...";
btnToggle.style.marginRight = "5px";
var innerSpan = d.createElement("span");
innerSpan.setAttribute("class", "dropdown-menu pull-right");
for (var z = 9; z < nb; z++) {
var btns = d.createElement("button");
btns.setAttribute("class", "btn btn-xs btn-default");
btns.setAttribute("onclick", 'gotonumber($(this))');
btns.innerHTML = z;
innerSpan.appendChild(btns);
}
outerSpan.appendChild(btnToggle);
outerSpan.appendChild(innerSpan);
$("#" + w).append(outerSpan);
} else if (x < 9) {
$("#" + w).append("<button style='margin-right:5px;' onclick='gotonumber($(this));' class='btn btn-xs btn-default'>" + x + "</button>");
} else {
$("#" + w).append("<button style='margin-right:5px;' onclick='gotonumber($(this));' class='btn btn-xs btn-default'>" + nb + "</button>");
return;
}
}
}
}
f = 0;
t = i;
};
