Javascript-форум - Помогите настрить Bootpag (пагинация страниц)

<?php /*колличество товаров для вывода */ $item_per_page = 7; $results = mysqli_query($link, "SELECT COUNT(*) FROM product WHERE brand = 'вентс'"); $get_total_rows = mysqli_fetch_array($results); //total records /* колличество страниц */ $pages = ceil($get_total_rows[0]/$item_per_page); function test($link) { $item_per_page = 7; if(isset($_POST["page"])){ $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); if(!is_numeric($page_number)){die('Invalid page number!');} //incase of invalid page number }else{ $page_number = 1; } $position = (($page_number-1) * $item_per_page); $sql = "SELECT * FROM product WHERE brand = 'вентс' LIMIT $position, $item_per_page "; $results = mysqli_query($link, $sql); for($i = 0;$i < mysqli_num_rows($results); $i++) { $rr[] = mysqli_fetch_array($results); } if(!$results){ echo "<p>Какая то ошибка с настройками...</p>"; } return $rr; } $rr = test($link); ?> <html> <head> <meta charset="utf-8"/> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <script> $('document').ready(function(){ $('#show_paginator').bootpag({ total: <?= $pages; ?>, page: 1, maxVisible: 5, leaps: false, firstLastUse: true, next: '&rsaquo;', prev: '&lsaquo;', first: '«', last: '»' }).on('page', function(event, num) { $("#dynamic_content").html('страница ' + num ); $("#tovar").html(html).hide().fadeIn(1000); // or some ajax content loading... }); }); </script> <div id="dynamic_content"></div> <div id="show_paginator"></div> <ul id="tovar" > <?php foreach ($rr as $item) :?> <li> <a href = "description-vents&model=<?= $item["model"] ?>"; id="title"><?= "<small>" . $item["brand"] . "</small><br/>".$item["model"] ?></a> <img style="position: relative;" src="https://ensy.com.ua/product/<?= $item["name"]; ?>" > <div id="price" ><?php echo (int)$item["cena"]. " грн. "; ?></div> </li> <?php endforeach; ?> </ul> <style> #tovar {margin:0px;padding:0px} #tovar li{border:1px solid #074776;border-radius:5px;-moz-border-radius:5px;float:left; width:165px;padding:10px;margin:20px;height:250px;cursor:move;list-style:none; list-style:none; } #tovar img {max-width: 165px; max-height: 165px;} #title {text-align:center;margin:0px;color:#35a83e;font-size:1.2em;font-weight:bold;} #price {text-align:center;margin:0px;color:red;font-size:1.4em;font-weight:bold;} </style> </body> </html>

Мой велосипед
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>