我正在开发一个jQuery分页工具,当我让分页工作时,我看到了一个缺陷:
在桌面上有一行14个分页链接是可以的,但在移动设备上是不行的。因此,我想将一次可见页面的数量限制为5个(不包括next/prev按钮),并在到达第三个可见页面时进行更新,并更新分页中的可见页面
| Prev | 1 | ... | 3 | 4 | 5 | 6 | Next |
到目前为止,我已经编写了这个CodePen。我知道有插件可以为我做这件事,但我想避免在这个项目中使用插件。
HTML(正在分页的示例内容)
<div class="container" id="jar">
<div class="row content">
<div class="col">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="col">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
</div>
HTML(分页元素)
<nav>
<ul class="pagination justify-content-center pagination-sm">
<li id="previous-page" class="page-item"><a class="page-link" href="javascript:void(0)">Prev</a>
</li>
</ul>
</nav>
JavaScript:
"use strict";
//NOTE: the class"page-item page-link" are classes used in bootstrap 4 and will not be seen declared or used outside of the <li> as the bootstrap framework uses those classes to apply CSS
//sets number of items and limits the number of items per page
var numberOfItems = $("#jar .content").length;
var limitPerPage = 2;
//as the items start at 0 to keep the items per page at the limitPerPage set in variable, need to subtract 1 as is shown below
$("#jar .content:gt(" + (limitPerPage - 1) + ")").hide();
//sets total pages rounded to the next whole number
var totalPages = Math.round(numberOfItems / limitPerPage);
//append the 1 page to the pagination
$(".pagination").append(
"<li class='page-item current-page active'><a class='page-link' href='javascript:void(0)'>" +
1 +
"</a></li>"
);
//append the pages in sequential order after prev button (as seen in the html in codepen)
for (var i = 2; i <= totalPages; i++) {
$(".pagination").append(
"<li class='page-item current-page'><a class='page-link' href='javascript:void(0)'>" +
i +
"</a></li>"
);
}
//appends the next button link as the final child element in the pagination
$(".pagination").append(
"<li class='page-item' id='next-page'><a class='page-link' href='javascript:void(0)'>Next</a></li>"
);
//When a page is selected, if it has "active" class return false, if no "active" class, go to page and add "active" class attribute and remove from any other element that has "active" on it.
$(".pagination li.current-page").on("click", function () {
if ($(this).hasClass("active")) {
return false;
} else {
var currentPage = $(this).index();
$(".pagination li").removeClass("active");
$(this).addClass("active");
$("#jar .content").hide();
//.hide will hide content that does not fit into that page (ie 0 and 1 on page one, 2 and 3 on page two and so on will show on appropriate page) If it does not fall within the range for that page .hide, if it falls within the range .show content
var grandTotal = limitPerPage * currentPage;
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#jar .content:eq(" + i + ")").show();
}
}
});
//when next is clicked if it is on the last page, return false otherwise move on to next page in pagination and remove "active" class from previous page and add "active" class to new page
$("#next-page").on("click", function () {
var currentPage = $(".pagination li.active").index();
if (currentPage === totalPages) {
return false;
} else {
currentPage++;
$(".pagination li").removeClass("active");
$("#jar .content").hide();
var grandTotal = limitPerPage * currentPage;
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#jar .content:eq(" + i + ")").show();
}
$(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass(
"active"
);
}
});
//when prev is clicked if it is on the 1 page, return false otherwise move on to previous page and remove "active" class from last page visited and add "active" class to new page
$("#previous-page").on("click", function () {
var currentPage = $(".pagination li.active").index();
if (currentPage === 1) {
return false;
} else {
currentPage--;
$(".pagination li").removeClass("active");
$("#jar .content").hide();
var grandTotal = limitPerPage * currentPage;
for (var i = grandTotal - limitPerPage; i < grandTotal; i++) {
$("#jar .content:eq(" + i + ")").show();
}
$(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass(
"active"
);
}
});
<nav>
<ul class="pagination">
<!-- Lien vers la page précédente (désactivé si on se trouve sur la 1ère page) -->
<li class="page-item <?= ($currentPage == 1) ? "disabled" : "" ?>">
<a href="./winners.php?page=<?= 1 ?><?php echo $slink;?>" class="page-link">First</a>
</li>
<li class="page-item <?= ($currentPage == 1) ? "disabled" : "" ?>">
<a href="./winners.php?page=<?= $currentPage - 1 ?><?php echo $slink;?>" class="page-link"><i class="fad fa-chevron-double-left"></i></a>
</li>
<?php for($page = $currentPage-2; $page <= $currentPage+2; $page++): ?>
<!-- Lien vers chacune des pages (activé si on se trouve sur la page correspondante) -->
<?php if(($page > 0 )&&($page < $pages )) {?>
<li class="page-item <?= ($currentPage == $page) ? "active" : "" ?>">
<a href="./winners.php?page=<?= $page ?><?php echo $slink;?>" class="page-link"><?= $page ?></a>
</li>
<?php }endfor ?>
<!-- Lien vers la page suivante (désactivé si on se trouve sur la dernière page) -->
<li class="page-item <?= ($currentPage == $pages) ? "disabled" : "" ?>">
<a href="./winners.php?page=<?= $currentPage + 1 ?><?php echo $slink;?>" class="page-link"><i class="fad fa-chevron-double-right"></i></a>
</li>
<li class="page-item <?= ($currentPage == $pages) ? "disabled" : "" ?>">
<a href="./winners.php?page=<?= $pages ?><?php echo $slink;?>" class="page-link">Last</a>
</li>
</ul>
</nav>
我建议使用一个函数,在给定当前页码、总页数和您想要的最大按钮数的情况下,该函数将返回一个数字数组,其中0表示按钮,其他数字表示可点击的页面按钮。
例如,它可以返回:
[1, 2, 0, 5, 6, 7, 0, 10, 11]
...它将代表以下按钮:
1,2,,5,6,7,,10,11
该函数将完成计算那些应该被放置,但是一旦你有了它,将它与你的页面集成就很容易了。
这是一个将按钮数量(不包括prev/Next,包括...按钮)限制为7的示例。如果您愿意,您可以将该参数减少到5:
// Returns an array of maxLength (or less) page numbers
// where a 0 in the returned array denotes a gap in the series.
// Parameters:
// totalPages: total number of pages
// page: current page
// maxLength: maximum size of returned array
function getPageList(totalPages, page, maxLength) {
if (maxLength < 5) throw "maxLength must be at least 5";
function range(start, end) {
return Array.from(Array(end - start + 1), (_, i) => i + start);
}
var sideWidth = maxLength < 9 ? 1 : 2;
var leftWidth = (maxLength - sideWidth*2 - 3) >> 1;
var rightWidth = (maxLength - sideWidth*2 - 2) >> 1;
if (totalPages <= maxLength) {
// no breaks in list
return range(1, totalPages);
}
if (page <= maxLength - sideWidth - 1 - rightWidth) {
// no break on left of page
return range(1, maxLength - sideWidth - 1)
.concat(0, range(totalPages - sideWidth + 1, totalPages));
}
if (page >= totalPages - sideWidth - 1 - rightWidth) {
// no break on right of page
return range(1, sideWidth)
.concat(0, range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
}
// Breaks on both sides
return range(1, sideWidth)
.concat(0, range(page - leftWidth, page + rightWidth),
0, range(totalPages - sideWidth + 1, totalPages));
}
// Below is an example use of the above function.
$(function () {
// Number of items and limits the number of items per page
var numberOfItems = $("#jar .content").length;
var limitPerPage = 2;
// Total pages rounded upwards
var totalPages = Math.ceil(numberOfItems / limitPerPage);
// Number of buttons at the top, not counting prev/next,
// but including the dotted buttons.
// Must be at least 5:
var paginationSize = 7;
var currentPage;
function showPage(whichPage) {
if (whichPage < 1 || whichPage > totalPages) return false;
currentPage = whichPage;
$("#jar .content").hide()
.slice((currentPage-1) * limitPerPage,
currentPage * limitPerPage).show();
// Replace the navigation items (not prev/next):
$(".pagination li").slice(1, -1).remove();
getPageList(totalPages, currentPage, paginationSize).forEach( item => {
$("<li>").addClass("page-item")
.addClass(item ? "current-page" : "disabled")
.toggleClass("active", item === currentPage).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"}).text(item || "...")
).insertBefore("#next-page");
});
// Disable prev/next when at first/last page:
$("#previous-page").toggleClass("disabled", currentPage === 1);
$("#next-page").toggleClass("disabled", currentPage === totalPages);
return true;
}
// Include the prev/next buttons:
$(".pagination").append(
$("<li>").addClass("page-item").attr({ id: "previous-page" }).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"}).text("Prev")
),
$("<li>").addClass("page-item").attr({ id: "next-page" }).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"}).text("Next")
)
);
// Show the page links
$("#jar").show();
showPage(1);
// Use event delegation, as these items are recreated later
$(document).on("click", ".pagination li.current-page:not(.active)", function () {
return showPage(+$(this).text());
});
$("#next-page").on("click", function () {
return showPage(currentPage+1);
});
$("#previous-page").on("click", function () {
return showPage(currentPage-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="pagination">
</div>
<div id="jar" style="display:none">
<div class="content">1) Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="content">2) Maecenas vitae elit arcu.</div>
<div class="content">3) Pellentesque sagittis risus ac ante ultricies, ac convallis urna elementum.</div>
<div class="content">4) Vivamus sodales aliquam massa quis lobortis. </div>
<div class="content">5) Phasellus id sem sollicitudin lacus condimentum malesuada vel tincidunt neque.</div>
<div class="content">6) Donec magna leo, rhoncus quis nunc eu, malesuada consectetur orci.</div>
<div class="content">7) Praesent sollicitudin, quam a ullamcorper pharetra, urna lacus mollis sem, quis semper augue massa ac est.</div>
<div class="content">8) Etiam leo magna, fermentum quis quam non, aliquam tincidunt erat.</div>
<div class="content">9) Morbi pellentesque nibh nec nibh posuere, vel tempor magna dignissim.</div>
<div class="content">10) In maximus fermentum elementum. Vestibulum ac lectus pretium, suscipit ante nec, bibendum erat.</div>
<div class="content">11) Phasellus sit amet orci at lectus fermentum congue. Etiam faucibus scelerisque purus.</div>
<div class="content">12) Pellentesque laoreet ipsum ac laoreet consectetur. </div>
<div class="content">13) Integer aliquet odio magna, lobortis mattis tortor suscipit sed.</div>
<div class="content">14) Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
<div class="content">15) Mauris a tellus luctus turpis elementum imperdiet vitae malesuada mauris. </div>
<div class="content">16) Donec id libero sagittis, laoreet lorem vel, tempus nunc. </div>
<div class="content">17) Donec vitae neque sed ex tristique hendrerit.</div>
<div class="content">18) Aliquam sollicitudin gravida varius.</div>
<div class="content">19) Donec auctor, augue sed finibus fermentum, neque erat interdum libero, eget porta metus lectus quis odio.</div>
<div class="content">20) Nunc quis ante enim. Etiam nisl orci, hendrerit ut pretium nec, tempor in metus.</div>
<div class="content">21) Donec et semper arcu.</div>
<div class="content">22) Donec lobortis interdum purus, eu semper nisl pulvinar ac.</div>
<div class="content">23) Cras laoreet eu elit vel porta.</div>
<div class="content">24) Quisque pharetra arcu eget diam posuere commodo.</div>
<div class="content">25) Nulla ornare eleifend neque, eget tincidunt nunc ullamcorper id. Nulla facilisi.</div>
</div>
我有问题的样式分页。我有html代码: null null 我的分页元素有渐变边框,这是正常的,但分页数是不可见的。请帮我解决这个问题。
在最底部,我发布了网页上可见的内容。不确定我在做什么,如果有必要,我会发布其他链接到此的. php文件。网页也无法使用,单击登录除了刷新页面外什么也不做。不确定发生了什么变化,但在添加几行代码之前,它正在工作。我在login.php上遇到了新问题,它用connect.php访问我的数据库 这是网页顶部显示的内容 ''' ''' 我的登录.php类由于更改而开始抛出错误 到''' ''' 这是我存储
我希望用户能够在我的查询方法中指定限制(返回量的大小)和偏移量(返回的第一条记录/返回的索引)。 这里是我没有任何分页功能的类。我的实体: 我的仓库: 我的服务界面: 我的服务实施: 现在,我尝试提供支持偏移和限制的分页功能。我的实体类保持不变。 我的“新”存储库接受一个可分页的参数: 我的“新”服务接口包含两个附加参数: 我的“新”服务实现: 然而,这不是我想要的。PageRequest指定页面
在MongoDB聚合管道中,从一个阶段到另一个阶段的记录流一次发生一个/批(或者)将等待当前阶段完成整个收集,然后再将其传递到下一个阶段? 例如,我有一个包含以下示例记录的集合类测试 我总共有大约100名学生的1000条记录,我有以下汇总查询 我有以下问题。 排序顺序在最终结果中丢失。如果我在$group之后放置另一个排序,则结果会正确排序。这是否意味着$group不维护之前的排序顺序? 我想将结
问题内容: 当调用支持它们的外部数据资源时,AngularJS是否具有Limit和Offset请求方法? 我想象有一个比这更优雅的解决方案,我通过routeParams传递限制和偏移量: 问题答案: 完整的分页解决方案是:(1)与服务器/数据库进行通信的服务;(2)处理next / prev的指令;以及(3)将其粘合在一起的控制器。 一旦有了指令和服务,您的控制器就是这样简单: 使用同样简单的HT
我需要获取所有可分页的文档,但我遇到了这个错误 com.fasterxml.jackson.databind.JsonMappingException:(java.lang.NullPointerException)(通过引用链:org.springframework.data.elasticsearch.core.aggregation.impl.AggregatedPageImpl["face