html 分页代码 5页超出....
@{
if (tmpCurrentPageIndex - 5 > 1)
{
...
}
for (int i = tmpCurrentPageIndex - 5; i < tmpCurrentPageIndex + 5; i++)
{
if (i >= 1 && i <= tmpPageSize)
{
@i
}
}
if (tmpCurrentPageIndex + 5 <= tmpPageSize)
{
...
}
}
js
(function ($) {
$('.mui-pagination').on('tap', 'a', function () {
var li = this.parentNode;
var classList = li.classList;
if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) {
var active = li.parentNode.querySelector('.mui-active');
if (classList.contains('mui-previous')) {//previous
if (active) {
var previous = active.previousElementSibling;
console.log('previous', previous);
if (previous && !previous.classList.contains('mui-previous')) {
$.trigger(previous.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else if (classList.contains('mui-next')) {//next
if (active) {
var next = active.nextElementSibling;
if (next && !next.classList.contains('mui-next')) {
$.trigger(next.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else {//page
active.classList.remove('mui-active');
classList.add('mui-active');
var page = parseInt(this.innerText);
var previousPageElement = li.parentNode.querySelector('.mui-previous');
var nextPageElement = li.parentNode.querySelector('.mui-next');
previousPageElement.classList.remove('mui-disabled');
nextPageElement.classList.remove('mui-disabled');
if (page <= 1) {
previousPageElement.classList.add('mui-disabled');
} else if (page >= 5) {
nextPageElement.classList.add('mui-disabled');
}
}
}
document.location.href = this.href;
});
})(mui);
后台:
List tmpTop = ViewBag.ContentKQTop;
List tmpAll = ViewBag.ContentKQAll;
int tmpCurrentPageIndex = ViewBag.CurrentPageIndex != 0 ? ViewBag.CurrentPageIndex : 1;
int tmpTotalRowCount = ViewBag.TotalRowCount;
int tmpSizeOfPage = ViewBag.SizeOfPage;
int tmpPageSize = 0;
if (tmpSizeOfPage != 0)
{
if (tmpTotalRowCount % tmpSizeOfPage == 0)
{
tmpPageSize = tmpTotalRowCount / tmpSizeOfPage;
}
else
{
tmpPageSize = (tmpTotalRowCount / tmpSizeOfPage) + 1;
}
}
这篇博客探讨了HTML分页的实现,展示了如何利用JavaScript处理分页链接的点击事件,包括向前、向后翻页及当前页切换的功能。同时,文章提到了后台处理分页的相关代码,涉及到页面数量计算和限制。

被折叠的 条评论
为什么被折叠?



