이 글의 내용은 페이지를 넘기거나 내릴 수 있는 페이지 넘김 기능(코드)의 네이티브 js 구현에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. .
페이지 넘기기 기능은 데이터를 렌더링할 때 자주 사용됩니다. 다음은 페이지 넘기기 기능을 기본 JS로 구현한 것입니다. 렌더링은 다음과 같습니다.
페이지 효과 실현
페이지 번호를 클릭하면 상황에 따라 판단되어 페이지 넘김 변경을 제어합니다.
(a). 페이지 수 > 제한 페이지 수 => 10페이지입니다. 한 번에 5페이지만 표시됩니다.
(a).총 페이지 수 = 제한된 페이지 수 =》1페이지만 반환됩니다. 5페이지만 반환됩니다. 페이지는 한 번에 표시됩니다
(a).총 페이지 수 < 제한 페이지 수 =》Return 총 페이지 수와 매번 표시되는 페이지 수는 동일합니다
3. 위쪽 및 아래쪽 페이지 페이지 넘기기 기능은 페이지 넘기기 상황에 따라 첫 번째 페이지와 마지막 페이지에서 페이지 넘기기 기능을 제거해야 합니다.
html
<div class="pagination">
<a href="javascript:;" class="page-pre">上一页</a>
<ul></ul>
<a href="javascript:;" class="page-next">下一页</a>
</div>css
/** 分页 */
.pagination{
display: inline-block;
}
.pagination>ul{
padding: 0;
margin: 0;
display: inline-block;
border: 1px solid #e2e2e2;
}
.pagination>ul>li{
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e2e2e2;
}
.pagination>ul>li:first-child{
background-color: rgb(30, 159, 255);
}
.pagination>ul>li:last-child{
border-right-width: 0px;
}
.pagination>ul>li>a{
display: inline-block;
width: 38px;
height: 30px;
line-height: 30px;
text-align: center;
color: #333;
}
.pagination>ul>li>a:hover{
opacity: 0.7;
}
.pagination>a{
display: inline-block;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
color: #333;
border: 1px solid #e2e2e2;
}
.pagination a.page-pre{
margin-right: -1px;
float: left;
color: #d2d2d2;
cursor: not-allowed;
border-right-width: 0px;
}
.pagination a.page-next{
float: right;
border-left-width: 0px;
}
/* 分页 end **/var pagination = function (o){
/**
* 翻页会出现的情况：
* 总页数 > 限制页数 30 > 10
* 总页数 < 限制页数 5 < 10
* 总页数 = 限制页数 10 = 10
* @var pnCount - 显示多少页码 => 限制显示页码 < 页码总数 （按限制显示） ： 限制显示页码 > 页码总数 （按页码总数显示）
* @var midN - 翻页的中间页码位置
*
*/
var config = {
count: o.count || 10,
limit: o.limit || 5, //每页显示的条数
};
var count = config.count,
limit = config.limit,
eUl = dorea(".pagination ul")[0],
ePre = dorea(".pagination .page-pre")[0],
eNext = dorea(".pagination .page-next")[0],
eUlChild = eUl.children,
pnCount = limit < count ? pnCount = limit : pnCount = count,
midN = Math.ceil( pnCount / 2 );
/* 初始化上下翻页的页码 */
ePre.setAttribute("data-page","1");
eNext.setAttribute("data-page","1");
/*
* @func renderPag
* @desc 渲染分页
* @param { string } startN - 页码起始数
* @param { string } currP - 当前页数 ，初始化该函数时可不传
* @var childLen - 所有的子元素（页码）的长度
*/
var renderPag = function (startN,currP){
var childLen = eUlChild.length;
/* 渲染前先清空所有页码 */
for ( var d = childLen-1; d>=0; d-- ) {
eUlChild[d].parentNode.removeChild(eUlChild[d]);
}
/* 渲染页码 */
for ( var i = startN; i <pnCount+startN; i++ ) {
var eLi = creatEle("li"),
eA = creatEle("a");
eA.innerHTML = i;
eA.setAttribute("href","javascript:;");
eLi.setAttribute("data-page",i);
eLi.appendChild(eA);
eUl.appendChild(eLi);
/* 添加页码的点击事件，获取当前页码currPage */
eLi.addEventListener("click",function (){
var currPage = this.getAttribute("data-page");
turnPag(currPage);
ePre.setAttribute("data-page",currPage);
eNext.setAttribute("data-page",currPage);
});
}
/* 每次重新渲染翻页时，判断当前页情况（是否属于首页和尾页） */
if (currP!==undefined) {
if (currP=="1") {
ePre.style.color = "#d2d2d2";
ePre.style.cursor = "not-allowed";
ePre.removeEventListener("click",preFn,false);
}else if(currP==count){
eNext.style.color = "#d2d2d2";
eNext.style.cursor = "not-allowed";
eNext.removeEventListener("click",nextFn,false);
}else{
ePre.style.color = "#333";
ePre.style.cursor = "pointer";
eNext.style.color = "#333";
eNext.style.cursor = "pointer";
ePre.addEventListener("click",preFn,false);
eNext.addEventListener("click",nextFn,false);
}
}
};
/**
* @func turnPag
* @desc 翻页事件判断，主要用于点击事件发生后，进行页码渲染前的判断
* @param { string } cp - 传入一个点击所获得的当前页数
* 情况：1) count > limit
* a). limit的前半部分页码，例如 10,5 ，前半部分是 1,2 => 起始页为 1
* b). limit的后半部分页码，例如 10,5 ，后半部分是 9,10 => 起始页为 (count-limit)+1
* b). limit的中间部分，例如 10,5 ，中间部分是 4-7 => 起始页为 (当前页 - (limit/2))+1
* 情况：2) count = limit => 起始页为 1
* 情况：3) count < limit => 限制10条，但真实数据确只有5条
* a). 发生这类情况，限制条数应以总数据条数为准则
*
*/
var turnPag = function (cp){
console.log("当前第 "+cp+" 页");
if (count>limit) {
if ( cp<=midN ) { //判断是否属于前部分
renderPag(1,cp);
}else if( cp<=count && cp>count - midN ){ //判断是否属于后部分
renderPag( (count - limit)+1 ,cp) ;
}else{
renderPag( (cp-midN)+1 ,cp);
}
}else if (count===limit || count<limit) {
renderPag(1);
}else{
renderPag( (count - midN)-1 ,cp);
}
for (var i = 0; i<eUlChild.length; i++) {
eUlChild[i].style.backgroundColor = "#fff";
if (eUlChild[i].getAttribute("data-page") == cp) {
eUlChild[i].style.backgroundColor = "#1E9FFF"; /* 选中状态 */
}
}
};
/**
* @func preFn
* @desc 上翻页
* @func nextFn
* @desc 下翻页
*/
var preFn = function (){
var currPage = this.getAttribute("data-page");
currPage--;
turnPag(currPage);
ePre.setAttribute("data-page",currPage);
eNext.setAttribute("data-page",currPage);
};
var nextFn = function (){
var currPage = this.getAttribute("data-page");
currPage++;
turnPag(currPage);
ePre.setAttribute("data-page",currPage);
eNext.setAttribute("data-page",currPage);
};
renderPag(1);
/*
* 初次渲染翻页时，判断当前的总页数情况，初始化翻页功能
* 情况： 1) count > limit 上翻页：暗色，删除事件 - 下翻页：亮色，点击事件
* 情况： 2) count = limit 上下翻页：暗色，删除事件
* 情况： 3) count < limit 上下翻页：暗色，删除事件
*/
if (count>limit) {
ePre.style.color = "#d2d2d2";
ePre.style.cursor = "not-allowed";
ePre.removeEventListener("click",preFn,false);
eNext.addEventListener("click",nextFn,false);
}else{
ePre.style.color = "#d2d2d2";
ePre.style.cursor = "not-allowed";
ePre.removeEventListener("click",preFn,false);
eNext.style.color = "#d2d2d2";
eNext.style.cursor = "not-allowed";
eNext.removeEventListener("click",nextFn,false);
}
}관련 권장 사항:
js 드래그 앤 드롭 페이지 넘기기 구현 code_javascript 기술
웹 페이지 키보드 제어를 구현하는 Js 방법 페이지 넘기기_javascript 기술
위 내용은 Native js는 페이지를 위아래로 넘길 수 있는 페이지 넘김 기능을 구현합니다(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
