Мой велосипед
Dynamic pagination in Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="panel"></div>
<script>
(function(a,b){if(typeof exports==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define(b)}else{a.Pagination=b()}}}(window,function(){function a(c){var b=this instanceof a?this:Object.create(a.prototype);b.init.apply(b,arguments);return b}a.prototype={params:{tag:"",row:5,total:25,step:5,current:1,prev_text:"<",next_text:">",last_text:">>",first_text:"<<",prev_next:true,first_last:true,sizing:""},init:function(c){var b=this;var d=this.params;if(c&&c.hasOwnProperty("tag")&&typeof c.tag==="string"){this._element=document.querySelector(c.tag);if(!this._element){throw Error("Pagination: element with this tag isn't found")}}else{throw Error("Pagination: tag is not string")}this.params=Object.keys(d).reduce(function(f,e){if(!f.hasOwnProperty(e)){f[e]=d[e]}return f},c);this._element.addEventListener("click",function(g){var f=g?g.target:window.event.srcElement;var e=f.parentNode;g.preventDefault();if(e.tagName!="LI"||e.className.indexOf("disabled")!==-1){return}if(e.className&&e.className!="active"){b[e.className].call(b)}else{if(b.value!=+f.innerHTML){b.value=+f.innerHTML;b._callback&&b._callback(b.value)}}},false);this.value=this.params.current},build:function(){var h=this._start||0;var c=this.params.row+h;var d='<ul class="pagination'+(this.params.sizing?" "+this.params.sizing:"")+'">';var g="";var f=this._start==0;var b=this._start!=this.params.total-this.params.row;function e(j,i){return"<li"+(i?' class="'+i+'"':"")+'><a href="#">'+j+"</a></li>"}if(this.params.first_last){g=f?"first disabled":"first";d+=e(this.params.first_text,g)}if(this.params.prev_next){g=f?"prev disabled":"prev";d+=e(this.params.prev_text,g)}while(++h<=c){if(h>this.params.total){break}g=h==this.value?"active":"";d+=e(h,g)}if(this.params.prev_next){g=b?"next":"next disabled";d+=e(this.params.next_text,g)}if(this.params.first_last){g=b?"last":"last disabled";d+=e(this.params.last_text,g)}d+="</ul>";this._element.innerHTML=d},onclick:function(b){if(typeof b!="function"){throw Error("Pagination: callback onclick isn't function")}this._callback=b},first:function(){if(this._start!=0){this._start=0;this.build()}},last:function(){var b=this.params.total-this.params.row;if(this._start!=b){this._start=b;this.build()}},next:function(){var c=this._start;var b=this.params.total-this.params.row;this._start+=this.params.step;if(this._start>=b){this._start=b}if(c!=this._start){this.build()}},prev:function(){var c=this._start;if(this._start<this.params.step){this._start=0}else{this._start-=this.params.step;var b=this.params.total-this.params.row;if(this._start>=b){this._start=b-this.params.step}}if(c!=this._start){this.build()}},get value(){return this.params.current},set value(b){this.params.current=b;if(!(b>this._start&&b<=this._start+this.params.row)){this._start=Math.floor((b-1)/this.params.row)*this.params.row}this.build()}};return a}));
</script>
<script>
Pagination({tag: '#panel'}).onclick(function (page) {
alert(page);
});
</script>