1

I have followed instruction of author's page: http://flaviusmatis.github.io/simplePagination.js/

and from this: How to use SimplePagination jquery.

And i tried to implement it on my php code as below steps. I tried with firebugs but there is no error. According to the settings of js: it should displayed 5 pages and 2 results in each page. But it still displayed 10 results as normal and the pagination part only displayed this and unclickable. pagination

  1. I have included both css and js file to the header

  2. My HTML which displays results from database using while loop and there is 10 results.

     while ($row = $result->fetch_assoc()
{

 echo "<div id='item'>
        <div class='title'>$row[title]</div>
        <div class='description'>$row[description]</div>
       </div>";

}

  3. This is div which contains pagination and pagination initializer:

     <div class='pagination-page'></div>
 <script>
 jQuery(function($) {
 var items = $("#item");
 var numItems = items.length;
 var perPage = 2;

 // only show the first 2 (or "first per_page") items initially
 items.slice(perPage).hide();

 // now setup your pagination
 // you need that .pagination-page div before/after your table
$(".pagination-page").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "compact-theme",
onPageClick: function(pageNumber) { // this is where the magic happens
    // someone changed page, lets hide/show trs appropriately
    var showFrom = perPage * (pageNumber - 1);
    var showTo = showFrom + perPage;

    items.hide() // first hide everything, then show for the new page
         .slice(showFrom, showTo).show();
      }
     });
    });
    </script>
Community
  • 1
  • 1
Giang Nguyen
  • 495
  • 8
  • 22

1 Answers1

2

You should not use div id='item' since it produces multiple elements with the same id. It is very wrong, use class instead. Id must be unique. It should be sth like this...

var items = $(".item");
<div class='item' ...
jakub.staniewicz_creativestyle
  • 136
  • 4
  • I don't know it is a good idea to use this pagination jquery plugins? Because my website will need to display all possible results and then this plugin only calculates number of results... If i have thousands of results retrieve from database, it will take time to load all them. Should i use php pagination instead? Because i can use Limit in sql query to display only first 0-9 results in first page, if user click 2 page, it will display 10-19 result.... what you do think? please suggest... – Giang Nguyen Jan 31 '15 at 18:03
  • I would suggest php, but there may be many factors for frontend or backend solution. It might be a topic for another stack question :) – jakub.staniewicz_creativestyle Feb 01 '15 at 06:41