js 페이징 도구 example_javascript 기술

이 기사의 예에서는 js 페이징 도구의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

js 코드 부분:

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

/**
* 페이지 매김 js
​*/ 
var 페이지; 
 
(함수(){ 
        var Page = {version:"1.0",author:"liuxingmi"}; 
        var 쇼페이지 = 9; 
        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){ 
            var nav = '

'; 
                   nav = '
• 总记录数：' totalRecord '
'; 
                   nav = '
• 总页数：' totalPage '
'; 
                   nav = '
• 当前页：' 현재페이지 '
'; 
                   if(현재페이지 == 1){ 
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   } else {                     
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   } 
                   nav = '
• '; 
                           var start = currentPage - Math.floor(showPage/2); 
                           var end = currentPage Math.floor(showPage/2);
                           if(end > totalPage){ 
                               시작 -= (끝 - totalPage); 
                           } 
                            
                           if(start <= 0){ 
                               시작 = 1;  
                           } 
                           if(currentPage < showPage && end < showPage){ 
                              끝 = 쇼페이지;   
                           } 
                            
                           if(end > totalPage){ 
                               끝 = 총페이지; 
                           } 
                           for(var i = start; i <= end; i ){ 
                               if(i == currentPage){ 
                                   nav = '
  1. ' 나는 '
  '; 
                               } else {                               
                                   nav = '
  2. ' 나는 '
  '; 
                               } 
                           } 
                            
                           nav = '
'; 
                         if(현재페이지 == totalPage){ 
                             nav = '
• 后一页
'; 
                             nav ='
• 尾页'; 
                           } else { 
  nav = '
• 다음 페이지 페이지< ;/a>
'; nav ='
• 마지막 페이지'
                                                       nav = '

'
                $("#" divId).html(nav);                                                        };                              This.페이지 = 페이지
})();



css 부분:

코드 복사

코드는 다음과 같습니다./*페이지 나누기 스타일 시작*/ .페이지 매김{ 오버플로:숨김

여백:0 0 0 25px

패딩:10px 10px 6px 150px
테두리 상단:1px 솔리드 #c8c8c8
_줌:1
텍스트 정렬: 가운데
}
.페이지 매김 *{
디스플레이:인라인
부동:왼쪽
여백:0
패딩:0
글꼴 크기:12px
}
.페이지 매김 i{
플로트:없음
패딩 오른쪽: 1px
}
.currentPage b{
플로트:없음
색상:#f00
}
.페이지 매김 li{
목록 스타일:없음
여백:0 5px
}
.페이지 매김 li li{
위치:상대
여백:-2px 0 0
글꼴 계열: Arial, Helvetica, sans-serif
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
오버플로:숨김
높이:0
텍스트 들여쓰기:-9999em
테두리 상단:8px 솔리드 #fff
테두리 하단:8px 솔리드 #fff
}
.페이지 매김 li li a{
여백:0 1px
패딩:0 4px
테두리:3px 이중 #fff
테두리 색상:#eee
배경:#eee
색상:#06f
텍스트 장식:없음
}
.페이지 매김 li li a:hover{
배경:#f60
테두리 색상:#fff
테두리 색상:#f60
색상:#fff
}
li.firstPage{
여백-왼쪽:40px
테두리 왼쪽:3px 솔리드 #06f; }
.firstPage a,.previousPage a{
테두리 오른쪽:12px 단색 #06f; }
.firstPage a:hover,.previousPage a:hover{
테두리 오른쪽 색상: #f60> }
.nextPage a,.lastPage a{
테두리 왼쪽:12px 단색 #06f; }
.nextPage a:hover,.lastPage a:hover{
테두리 왼쪽 색상:#f60
}
.pagination li.lastPage{
테두리 오른쪽:3px 솔리드 #06f; }
.pagination li li.currentState a{
위치:상대
여백:-1px 3px
패딩:1px 4px
테두리:3px 이중 #fff
테두리 색상:#f60
배경:#f60
색상:#fff
}
.pagination li.currentState,.currentState a,.currentState a:hover{
테두리 색상:#fff #ccc
커서:기본값
}
/*페이징 스타일 끝*/



전화 방법:

코드 복사

코드는 다음과 같습니다.

Page.navigation("pageNav", 100, 10, 1, "xxxList");

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.