페이징 효과를 달성하기 위한 jQuery 플러그인 페이지 매김_jquery

JQuery 구현을 기반으로 하는 실용적인 jQuery 페이징 효과 플러그인 jquery.pagination.js는 pageselectCallback 함수 콜백 호출에 따라 ajax를 통해 동적 데이터를 호출할 수 있습니다. 호출되는 방식은 JSON 데이터입니다. 데이터는 JSON 형식의 데이터입니다. 단점 데이터를 한 번에 읽어내기 때문에 효율성이 떨어집니다. 플러그인은 많은 매개 변수에 대한 사용자 정의 구성 기능을 지원하지만 여전히 매우 좋습니다.

사용법:

1. 플러그인 및 jQuery 로드

<link rel="stylesheet" href="pagination.css"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.pagination.js"></script> 

2.HTML 콘텐츠

코드 복사 코드는 다음과 같습니다.

f0d136d5c4d2d19a8784317067550f8b16b28748ea4df4d9c2150843fecfba68

3. 함수 호출

<script type="text/javascript"> 
function pageselectCallback(page_index, jq){ 
        alert(page_index); 
        return false; 
      } 
$(document).ready(function(){ 
$(".pagination").pagination(100, { 
  callback: pageselectCallback, 
  
   num_edge_entries: 1, 
  
  }); 
}); 
</script> 

파라미터 구성 설명

매개변수 이름 매개변수 설명 선택값 기본값

callback 페이징 버튼 클릭을 위한 콜백 함수 function(){return false;}

current_page 초기화 시 선택된 페이지 번호 0번
items_per_page 페이지 당 표시되는 기록 수 10
link_to 페이징 링크 문자열 #
num_display_entries 최대 표시 페이지 수 숫자 11
next_text '다음 페이지' 문자열에 표시되는 텍스트 Next
next_show_always false로 설정하면 페이지 번호가 true인 경우에만 '다음 페이지' 버튼이 표시됩니다.
prev_show_always false로 설정하면 '이전' 버튼은 이전 페이지로 이동할 수 있는 경우에만 표시됩니다. 부울 true
prev_text '이전 페이지'에 표시되는 텍스트 문자열 이전
num_edge_entries가 1로 설정되면 첫 번째와 마지막 페이지는 항상 1 또는 0 0으로 표시됩니다
ellipse_text 현재 페이지 세그먼트부터 첫 번째 또는 마지막 페이지까지의 식별 문자열 문자열 …
load_first_page true로 설정하면 플러그인 초기화 시 콜백 함수가 실행됩니다. Boolean true

데모 보기 플러그인 다운로드

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.