我已经按照作者页面的说明进行操作: http://flaviusmatis.github.io/simplePagination.js/
从这里: How to use SimplePagination jquery .
我尝试按照以下步骤在我的 php 代码中实现它。我试过 Firebug ,但没有错误。根据js的设置:应该显示5页,每页显示2条结果。但它仍然正常显示10个结果,分页部分仅显示此且无法点击。
- 我已将 css 和 js 文件都包含到 header 中
我的 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/