How to implement the simplepagination plugin that i'm using with php?

Question

this is my html with php code:

      <?php

      $sql = mysqli_query($con, "SELECT * FROM blog_posts WHERE postStatus = 'accepted' ORDER BY date_accepted DESC");

        while($row = mysqli_fetch_array($sql))

      ?>
           <article>

             <?php echo $row['postTitle']." Posted on ".date('jS M Y', strtotime($row['postDate']))." ".$row['postDesc']; ?>


           </article>
      <?php
        }
      }
      ?>


 <div id="selector">
   <ul class="selector">
      <li>
          <p>One</p>
      </li>
      <li>
          <p>Two</p>
      </li>
      <li>
          <p>Three</p>
      </li>
      <li>
          <p>Four</p>
      </li>
      <li>
          <p>Five</p>
      </li>
      <li>
          <p>Six</p>
      </li>
      <li>
          <p>Seven</p>
      </li>
          <li>
      <p>Eight</p>
          </li>
      </ul>
   </div>

and this is the javascript:

  $(function() {
        $(selector).pagination({
                items: 100,
                itemsOnPage: 5,
                cssStyle: 'light-theme'
        });

});

i got this plugin from here: http://flaviusmatis.github.io/simplePagination.js/

what i want to know is how to use this plugin with my php code. Like i have 20 posts and i only want to show 10 post. thanks in advance!!

Answer 1

Additionally to what sanki told you, in order to make this plugin to work you'll need to have an already working pagination system, being that said, you'll need to work it up:

$(function() {
    $(selector).pagination({
            items: 100,
            itemsOnPage: 5,
            cssStyle: 'light-theme'
    });
});

Change the selector to the one that contains your id or class pagination placeholder and then, replace the item value with the maximum record number (you can achieve this by querying your database and counting total rows with mysqli_num_rows

Again, it would look like this:

$(function() {
        $('.selector').pagination({
                items: <?php echo $count; ?>,
                itemsOnPage: 5,
                cssStyle: 'light-theme'
        });
});

Now you need to set some additional properties:

hrefTextPrefix: This is the one that changes the prefix in your URL whenever you pass the page number value, it is set to #page- by default, you can change it to ?page= so values can be passed along by $_GET

currentPage: This is the one that tells to your pagination style which page are you currently on, in order for it to know this value you'll need to pass $_GET value in here

Now, your code should look something like this:

$(function() {
        $('.selector').pagination({
                items: <?php echo $count; ?>,
                itemsOnPage: 5,
                cssStyle: 'light-theme',
                hrefTextPrefix: '?page=',
                currentPage: <?php echo $_GET['page']; ?>
        });
});

And that's it, you should have your pagination system working.

If you need additional information check full plugins documentation: flaviusmatis.github

Answer 2

The "selector" here represents a class, so you should be using this[If you want pagination for "li"]:

$(function() {
        $('.selector').pagination({
                items: 100,
                itemsOnPage: 5,
                cssStyle: 'light-theme'
        });
});

OR

The "selector" here represents an id, so you should be using this[If you want pagination for "div"]:

$(function() {
        $('#selector').pagination({
                items: 100,
                itemsOnPage: 5,
                cssStyle: 'light-theme'
        });
});

You can use any one of the method depending on where do you want pagination to be implemented, whther on li or div.

To Implement pagination on the article,Give article an ID or Class and then implement the pagination. For example lets say article has id="pagin", then the respective pagination function should be implemented like:

$(function() {
     $('#pagin').pagination({
           items: 100,
           itemsOnPage: 5,
           cssStyle: 'light-theme'
      });
 });