jquery 페이지 플러그 인 jqPaginator 의 사용 방법 을 빠르게 파악 합 니 다.

5306 단어 jquery페이지 플러그 인jqPaginator
본 고 는 여러분 에 게 매우 좋 은 jQuery 페이지 플러그 인:jqPaginator 를 소개 할 것 입 니 다.
jqPaginator 는 간결 하고 사용자 정의 jQuery 페이지 구성 요소 로 다양한 응용 장면 에 적 용 됩 니 다.
간단 한 소개
현재 인터넷 에는 다양한 페이지 구성 요소 가 많 지만 마음 에 드 는 것 을 찾기 가 쉽 지 않 아 jqPaginator 가 탄생 했다.
내 마음속 의 이상 적 인 페이지 구성 요 소 는 CSS 프레임 워 크 의 제한 을 받 지 않 고 다양한 스타일 의 웹 페이지 에 사용 할 수 있다.나의 얕 은 경험 으로 볼 때 이 목 표를 달성 하려 면 관건 적 인 것 은 고도 로 사용자 정의 한 Html 구조 이다.그래서 jqPaginator 는 합 리 적 인 범위 내의 사용자 정 의 를 위해 다양한 장면 을 유연 하 게 사용 하도록 노력 했다.
효과 캡 처:

사용 설명
예시
사용법 은 간단 합 니 다.먼저 jQuery 와 jqPaginator 를 도입 한 후에 페이지 를 초기 화 할 수 있 습 니 다.
$('#id').jqPaginator({ totalPages: 100, visiblePages: 10, currentPage: 1, first: '
  • First
    • ', prev: '', next: '', last: '
  • Last
    • ', page: '
  • {{page}}
    • ', onPageChange: function (num) { $('#text').html('   ' + num + ' '); } });
    상례 는 첫 번 째 데모,Bootstrap 스타일 의 페이지 입 니 다.구체 적 인 매개 변 수 는 잠시 후에 소개 합 니 다.여기 서 알 아야 할 것 은 id 가 아 닌 class 를 사용 하면 이 class 의 모든 요 소 를 초기 화하 고 위의'두 페이지 연결'효 과 를 실현 합 니 다.
    매개 변수

    확장 방법
    jqPaginator 는 두 가지 확장 방법 을 제공 하여 초기 화 후 구성 요 소 를 조작 하 는 데 편리 합 니 다.
    
$('#id').jqPaginator('option', options)
    초기 화 후 동적 으로 설정 수정
    
$('#id').jqPaginator('option', { currentPage: 1 });
$('#id').jqPaginator('destroy')
    jqPaginator 소각
    
$('#id').jqPaginator('destroy');
    관련 자료
    원본 다운로드:https://github.com/keenwon/jqPaginator
    공식 주소:http://jqpaginator.keenwon.com/
    추천 솔 루 션(배경 결합):
    첫 페이지 는 구체 적 인 배경 조 회 를 통 해 넘 어 와 총 페이지 수 등 데 이 터 를 가 져 와 페이지 내 비게 이 션 바 를 초기 화하 고 table 에 첫 페이지 데 이 터 를 표시 합 니 다.
    다음 에 모든 페이지 단 추 를 누 르 면 ajax 요청 을 보 내 고 이 페이지 의 데 이 터 를 json 으로 되 돌려 table 에 채 우 는 것 이 좋 습 니 다.이렇게 하면 매번 총 항목 수 를 조회 하지 않 고 현재 페이지 의 데 이 터 를 조회 하면 됩 니 다.속도 가 빠 르 고 데이터 베이스 부담 을 줄 일 수 있 습 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.참고 하 시기 바 랍 니 다.
    
<script type="text/javascript">
$(function(){
$('#page').jqPaginator({
//totalPages: 100,
pageSize:2,//        
totalCounts:${totalCount},
visiblePages: 10,
currentPage: 1,

first: '<li class="first"><a href="javascript:void(0);">First</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',
next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',
last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num) {
// alert('   ' + num + ' ');
//    ajax       
$.get('ajaxpage',{num:num},function(data){
$("#tab").html('<tr><th>  Id</th><th>  </th><th>  </th><th>  </th></tr>');
for(var i=0;i<data.length;i++){

$("#tab").append('<tr><td>'+data[i].id+'</td><Td>'+data[i].bookName+'</Td><td>'+data[i].bookPrice+'</td>'+
'<td><a href="/test_maven/updateBook?id=${book.id }">  </a>&nbsp;<a href="#">  </a></td> </tr>');
}
},'json')
}
});
})

</script>
<title>Insert title here</title>
</head>
<body>
<h1>    </h1>
<table id="tab">
<tr><th>  Id</th><th>  </th><th>  </th><th>  </th></tr>
<c:forEach items="${books }" var="book">

<tr><td>${book.id }</td><Td>${book.bookName }</Td><td>${book.bookPrice }</td>
<td><a href="/test_maven/updateBook?id=${book.id }">  </a>&nbsp;<a href="#">  </a></td>
</tr>

</c:forEach>


</table>
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    vue.js 프레임 워 크 는 폼 정렬 과 페이지 효과 구현
    JS 가 실현 한 가감 곱 하기 사 칙 연산 계산기 예시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage