无法使simplePagination jQuery插件正常工作

Question

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.

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> 

Answer 1

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' ...