无法让 simplePagination jquery 插件工作

Question

我已按照作者页面的说明进行操作： http://flaviusmatis.github.io/simplePagination.js/

从这里： How to use SimplePagination jquery.

我尝试按照以下步骤在我的 php 代码上实现它。我尝试使用萤火虫，但没有错误。根据js的设置：应该显示5个页面，每个页面显示2个结果。但它仍然正常显示10个结果，分页部分只显示这个并且无法点击。

1. 我已将 css 和 js 文件都包含到标题中

2. 我的 HTML 使用 while 循环显示来自数据库的结果，有 10 个结果。

    while ($row = $result->fetch_assoc()
   {
   
    echo "<div id='item'>
           <div class='title'>$row[title]</div>
           <div class='description'>$row[description]</div>
          </div>";
   
   }
   

3. 这是包含分页和分页初始化器的 div：

    <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

你不应该使用 div id='item' 因为它产生具有相同 id 的多个元素。 这是非常错误的，请改用class。 ID 必须是唯一的。应该是这样的……

var items = $(".item");

<div class='item' ...