Is there a way to show entries per page with Javascript?

Question

Lets say that I have built a file in which all of the entries coming from DB are going to be shown.

In order to avoid doing server-side pagination, I would like to create something like hide/show old/new pages after specific amount of entries found.

This is mainly because I have found myself really struggling with the pagination in the server side which I normally can do but this time its impossible as I'm fetching data from two DB tables.

This is the code that I have done using Javascript(I'm using a library); this is my html:

<div class="page" id="page1">
   <?php foreach($data as $d) :  ?>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
       <div class="col-md-4">.....content.....</div>
   <?php endforeach; ?>
</div>
<ul id="pagination-demo" class="pagination"></ul>

and this is the javascript:

$('#pagination-demo').twbsPagination({
  totalPages: <?= $i++ ?>,
  // the current page that show on start
  startPage: 1,

  // maximum visible pages
  visiblePages: 5,

  initiateStartPageClick: true,

  // template for pagination links
  href: false,

  // variable name in href template for page number
  hrefVariable: '{{number}}',

  // Text labels
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',

  // carousel-style pagination
  loop: false,

  // callback function
  onPageClick: function (event, page) {
    $('.page-active').removeClass('page-active');
    $('#page'+page).addClass('page-active');
  },

  // pagination Classes
  paginationClass: 'pagination',
  nextClass: 'next',
  prevClass: 'prev',
  lastClass: 'last',
  firstClass: 'first',
  pageClass: 'page',
  activeClass: 'active',
  disabledClass: 'disabled'

});

So assuming that I currently have 20 entries in DB, how can I make it possible to only display 12 per page?

The actual behavior is just showing 20 entries per page.

Thanks for reading?

Answer 1

use offset and limit in your SQL query

<?  
    $limit = $_GET['limit'];
    $offset = $_GET['offset'];
    $bdd = new PDO(LOGIN DATA);
    $req = $bdd->prepare("SELECT * FROM table LIMIT ? OFFSET ?");
    $req->execute(array($limit, $offset));
?>

Then in your page use this loop

<?php 
  while($line = $req->fetch()){
?>
your html code
<?php
}
?>