Good afternoon, my problem is this. I have a jquery paging and the pages are counted correctly as configured, however the content does not appear, code below:
products.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script><scriptsrc="js/imtech_pager.js"></script>
<div id="pd_list">
<div class="item">
</div>
</div>
<div id="pagingControls"></div>
<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.paragraphsPerPage = 6; // set amount elements per page
pager.pagingContainer = $('#pd_list'); // set of main container
pager.paragraphs = $('div.item', pager.pagingContainer); // set of required containers
pager.showPage(1);
});
</script>
imtech_pager.js
var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 6;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#pd_list';
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = '';
this.paragraphs.slice((page-1) * this.paragraphsPerPage,
((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
html += '<div>' + $(this).html() + '</div>';
});
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(content, currentPage, numPages) {
var pagingControls = 'Page: <ul>';
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
} else {
pagingControls += '<li>' + i + '</li>';
}
}
pagingControls += '</ul>';
$(pd_list).html(pagingControls);
}
}
style.css
#pd_list .item{
width:200px;
height:200px;
background-color:red;
margin:5px;
display:inline-block;
float:left;
}
The problem is that the divs with the class item do not appear but the pager works. The divs sort of blink, pop in and out, and a fraction of a second.