无法使 simplePagination jquery 插件正常工作

Can't get simplePagination jquery plugin to work

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

从这里: How to use SimplePagination jquery.

并且我尝试按照以下步骤在我的 php 代码中实现它。我试过萤火虫,但没有错误。根据js的设置:应该显示5页,每页显示2条结果。但它仍然正常显示10个结果,分页部分仅显示此且无法点击。

  1. 我已将 css 和 js 文件包含到 header
  2. My 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>
    

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

var items = $(".item");
<div class='item' ...