I am trying to create pagination with pure PHP and jquery. I have done this and it works exactly how I want it to work. Essentially I get all products from my database using PHP.
I then populate the whole page with the products and hide every row after the first 6 products. Then using jquery I create the pagination buttons and logic.
Now the only thing is that my code looks extremely sloppy, messy and just a nightmare if I had to come back and redo things.
If anyone is up for a challenge, I will post my js fiddle link here https://jsfiddle.net/L323d4z4/ (It's not finished so you need to make the page full width as it's not mobile friendly yet).
I will state that this is not a problem as the code works, so only have a look at this if you have free time on your hands and fancy a challenge.
For a quick look at the code layout it follows like this:
<section class="row product-row for-pag-1" style="display: block;"> <div class="col-sm-4">
<article class="product">
<img src="http://access.jm-cms.co.uk/uploads/feature_image.jpg" class="img-responsive" alt="product 1">
<span class="green-header">£10.99</span>
<h2>Birthday Card Book</h2>
<p></p><p class=""p1"">Invaluable for recording birthdays and anniversaries, th</p>
<div class="row cart-view-buttons">
<div class="col-sm-6">
<div class="add-to-cart">
<a href="#">Add to cart</a>
</div>
</div>
<div class="col-sm-6">
<div class="view-product">
<a href="#">View</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-sm-4">
<article class="product">
<img src="http://access.jm-cms.co.uk/uploads/feature_image.jpg" class="img-responsive" alt="product 1">
<span class="green-header">£28.50</span>
<h2> Chalet Embroidered Tree Cushion</h2>
<p></p><p class=""p1"">Cosy up with this chalet style embroidered cushion from </p>
<div class="row cart-view-buttons">
<div class="col-sm-6">
<div class="add-to-cart">
<a href="#">Add to cart</a>
</div>
</div>
<div class="col-sm-6">
<div class="view-product">
<a href="#">View</a>
</div>
</div>
</div>
</article>
</div>
<div class="col-sm-4">
<article class="product">
<img src="http://access.jm-cms.co.uk/uploads/feature_image.jpg" class="img-responsive" alt="product 1">
<span class="green-header">£14.95</span>
<h2>Cake Stand</h2>
<p></p><p class=""p1"">Afternoon tea is the new big thing (we reckon!) Get ahea</p>
<div class="row cart-view-buttons">
<div class="col-sm-6">
<div class="add-to-cart">
<a href="#">Add to cart</a>
</div>
</div>
<div class="col-sm-6">
<div class="view-product">
<a href="#">View</a>
</div>
</div>
</div>
</article>
</div>
</section>
This is one section that holds 3 products. I show 2 rows and then display:none the rest of the rows. Each row has a class for example "for-pag-1" or "for-pag-2" This is how i link the pagination buttons to which products should display.
An example of a jquery involved:
$('.next-page').click(function(){
var lastVisible = $('.pagination').find('.showing:last');
var firstVisible = $('.pagination').find('.showing:first');
if(lastVisible.data('page') > 6) {
firstVisible.hide();
}
$('.dots').parent('li').remove();
if(firstVisible.hasClass('active')){
if(lastVisible.data('page') !== $('.next-page').data('page')) {
firstVisible.removeClass('showing').removeClass('active').hide().parent('li').hide().next().children().addClass('active');
lastVisible.parent('li').next().show().children().show().addClass('showing');
//Show the correct products
var newActivePage = firstVisible.parent('li').next().children().data('page');
$('.product-row').hide();
$('.for-pag-' + newActivePage).show();
}
}else{
if(lastVisible.data('page') !== $('.next-page').data('page')) {
var currentlyActive = $('.active');
currentlyActive.removeClass('active').parent('li').next().children().addClass('active');
firstVisible.removeClass('showing').hide().parent('li').hide();
lastVisible.parent('li').next().show().children().show().addClass('showing');
//Show the correct products
var newActivePage = currentlyActive.parent('li').next().children().data('page');
$('.product-row').hide();
$('.for-pag-' + newActivePage).show();
}
}
});
As you can see straight away this is messy. So if your up for it, please take a look.
Thanks
<section>
element which is defined that it is a generic element not intended for styling purposes. Likewise<article>
has been used incorrectly for the same reason. \$\endgroup\$