지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > javascript ajax 모방 Baidu 페이징 기능_javascript 기술

javascript ajax 모방 Baidu 페이징 기능_javascript 기술

WBOY
풀어 주다： 2016-05-16 17:18:18
원래의
1126명이 탐색했습니다.
复제대码 代码如下:

/**
* Ajax 페이징 기능
* 페이징이 필요한 페이징 구성 요소 컨테이너 요소로

    *을 추가합니다.
    * pageCount 총 페이지 수
    * currentPage 현재 페이지 번호
    * 페이지 매김 클래스가 있는 컨테이너 ol 컨테이너 요소
    * 데이터 로드를 위한 loadData 함수
    * 버전 1.0
    */
    페이지 매기기 : 기능( pageCount, currentPage, 컨테이너, loadData) {
    this.startPage = 1;
    this.endPage = 페이지카운트;
    this.minDisplayPageCount = 5;
    var c = $(컨테이너);
    var paginationLinks = "";
    if(pageCount == 1) {
    c.css({'visibility': 'hidden'});
    반환;
    }
    if(pageCount > this.minDisplayPageCount 1) {
    if(currentPage - this.minDisplayPageCount > 0) {
    this.startPage = currentPage - this.minDisplayPageCount;
    }
    if((currentPage this.minDisplayPageCount - 1) < pageCount) {
    this.endPage = currentPage this.minDisplayPageCount - 1;
    } else {
    this.endPage = pageCount;
    }
    }
    paginationLinks = "
      ";
      if(currentPage != 1) {
      paginationLinks = "
      • ";
      }
      for(var i = this.startPage; i <= this.endPage; i ) {
      if(currentPage == i) {
      paginationLinks = "
    • " 현재페이지 "
      • ";
      } else {
      paginationLinks = "
    • " 나는 "
      • ";
      }
      }
      if(currentPage < pageCount) {
      paginationLinks = "
      • ";
      }
      paginationLinks = "
    ";
    c.html(paginationLinks);
    var link = $("#page_number ul li a");
    links.each(function(index) {
    if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) {
    $(this ).click(function(event) {
    alert(links[index].innerHTML);
    loadData(curTaskId,"","",parseInt(links[index].innerHTML));
    페이지 매김 (pageCount,parseInt(links[index].innerHTML), 컨테이너, loadData)
    })
    }
    });
    var prevPage = $("#prevpage");
    var nextPage = $("#nextpage");
    c.css({'visibility': 'visible'});
    if(prevPage) {
    prevPage.click(function(event) {
    loadData(curTaskId,"","",currentPage - 1);
    페이지 매김(pageCount, currentPage - 1, 컨테이너 , 로드데이터)
    });
    }
    if(nextPage) {
    nextPage.click(function(event) {
    loadData(curTaskId,"","",currentPage 1);
    페이지 매김(pageCount, currentPage 1) , 컨테이너, 로드데이터)
    });
    }
    }

loadData는
复主代码 代码如下:

var currentPage = 1;
loadExamList(currentPage){
//TODO
페이지 매김(5,currentPage,$(ul),loadExamList);
};
관련 라벨：
分页函数
원천：php.cn
이전 기사：동일한 ratio_javascript 기술로 js 스케일링 이미지의 작은 예 다음 기사：javascript_javascript 기술로 색상 그라데이션을 구현하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
for 루프는 무작위로 1에서 0으로 이동합니다. 기본적으로 페이지가 새로 고쳐질 때마다 for 루프는 1에서 0으로 변경될 가능성이 있습니다. 왜 이런 일이 발생하는지 모르겠지만 내 이미지가 서로 겹쳐지는 방식...
에서 2024-04-06 16:48:14
0
1
393
높이가 예상한 것과 다른 CSS 그리드에 문제가 있습니다. 어떤 실수를 저지를 수 있습니까? 저는 현재 CSS 그리드를 배우고 있는데 이 카드를 그리드로 나누어서 만들어 달라는 요청을 받았습니다. 제가 만들고 싶은 그리드의 사진이 첨부되어 있습니다. 실제...
에서 2024-04-06 12:52:14
0
1
339
VueJS 스케줄링 기능의 실행 순서로 인해 문제가 발생함 공지 사항 목록(API에서 검색)을 페이지에 표시하려고 합니다. 저는 Vuex 스토어를 사용하고 있으며 Announcements라는 상태가 있습니다. 또한 사용자...
에서 2024-04-06 10:37:58
0
1
385
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿