javascript - 无法使simplePagination jQuery插件正常工作

我遵循作者页面的指示：
http://flaviusmatis.github.io/simplePagination.js/

从这个：
How to use SimplePagination jquery。

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



我已经在标题中包含了css和js文件
我的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>";

}

这是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的元素。
这是非常错误的，改用类。 ID必须是唯一的。应该是这样……

var items = $(".item");

<div class='item' ...

关于javascript - 无法使simplePagination jQuery插件正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28254491/