javascript 分页

最新推荐文章于 2025-11-29 13:42:57 发布

最新推荐文章于 2025-11-29 13:42:57 发布 · 74 阅读

文章标签：

本文介绍了一个简单的分页组件实现方式，使用JavaScript与jQuery操作DOM，实现了前后翻页及页码显示等功能，并通过不同状态下的按钮禁用逻辑确保用户体验。

<p>pager.js内容：</p>
<p><textarea cols="91" rows="15" name="code" class="javascript">var _START_, _END_; //pager容器中当前最大值与最小值
var _PageIndex_; //当前页码数值
var _pageTotal = 26; //共106页
var _pagerContent = 6; //pager容量10页
var PagerCss = "style=/"text-decoration:none; background:#ccddee; margin-left:5px; border:sloid 1px #ff3300; padding:5px 10px; line-height:20px;float:left;/"";
var pagerHtml = "";
_START_ = 1;
_END_ = _pagerContent;
function goBack() {
if (_END_ - _START_ < _pagerContent - 1) {
_START_ -= _pagerContent;
_END_ = _START_ + _pagerContent - 1;
} else {
_START_ -= _pagerContent;
_END_ -= _pagerContent;
}
_PageIndex_ = _START_;
SetCss();
pageClick(_PageIndex_, false);
}
function SetCss() {
if (_START_ == 1 && _END_ == _pageTotal) {
$("#btnBack").attr("disabled", true);
$("#btnNext").attr("disabled", true);
} else {
if (_START_ == 1) {
$("#btnBack").attr("disabled", true);
$("#btnNext").attr("disabled", false);
}
if (_END_ == _pageTotal) {
$("#btnBack").attr("disabled", false);
$("#btnNext").attr("disabled", true);
} if (_START_ != 1 && _END_ != _pageTotal) {
$("#btnBack").attr("disabled", false);
$("#btnNext").attr("disabled", false);
}

}

}
function btnBack_onclick() {
goBack();
CreatePagerHtml();
}
function CreatePagerHtml() {
pagerHtml = "";
if (_END_ > _pageTotal) {
_END_ = _pageTotal;
}
for (var i = _START_; i <= _END_; i++) {
pagerHtml += "<a href="/" mce_href="/""#/" onclick=/"pageClick(this,true)/"" + PagerCss + ">" + i + "</a>";
}
$("#pager").html(pagerHtml);
}
function btnNext_onclick() {
goNext();

CreatePagerHtml();
}
function goNext() {
_START_ += _pagerContent;
if (_END_ + _pagerContent > _pageTotal) {
_END_ = _pageTotal;
} else {
_END_ += _pagerContent;
}
_PageIndex_ = _START_;
SetCss();
pageClick(_PageIndex_, false);
}

function pageClick(pageIndex, isNumber) {
if (isNumber == true) {
alert($(pageIndex).html());
} else {
alert(pageIndex);
}

}
$(function () {
$("#btnBack").attr("disabled", true);
_PageIndex_ = 1;
CreatePagerHtml();
pageClick(_PageIndex_);
});</textarea></p>
<p>html页面内容</p>
<p><textarea cols="90" rows="15" name="code" class="xhtml"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<mce:script src="Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js" type="text/javascript"></mce:script>
<mce:script src="Pager.js" mce_src="Pager.js" type="text/javascript"></mce:script>
</head>
<body>
<div>
<a href="#" mce_href="#" id="btnBack"onclick="return btnBack_onclick()" style="text-decoration:none; background:#ccddee; margin-left:5px; border:sloid 1px #ff3300; padding:5px 10px; line-height:20px;float:left;" mce_style="text-decoration:none; background:#ccddee; margin-left:5px; border:sloid 1px #ff3300; padding:5px 10px; line-height:20px;float:left;" ><<</a>

<div id="pager" style="float:left;" mce_style="float:left;" ></div>
<a href="#" mce_href="#" id="btnNext"onclick="return btnNext_onclick()" style="text-decoration:none; background:#ccddee; margin-left:5px; border:sloid 1px #ff3300; padding:5px 10px; line-height:20px;float:left;" mce_style="text-decoration:none; background:#ccddee; margin-left:5px; border:sloid 1px #ff3300; padding:5px 10px; line-height:20px;float:left;" >>></a>

</div>
</body>
</html>
</textarea></p>