jQuery 프런트엔드 페이징 예제 Sharing_jquery

사람들이 페이징을 할 때 대부분은 백그라운드에서 탐색 표시줄에 대한 HTML 문자열을 반환합니다. 실제로 프런트 엔드에서 js를 사용하여 구현하는 것도 쉽습니다.

페이저 메소드를 호출하고 매개변수를 입력하면 탐색 모음의 HTML 문자열이 반환됩니다. 메서드의 내부는 비교적 간단합니다.

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

/**
* 페이지 크기, 페이지당 표시되는 숫자
* pageIndex, 현재 페이지 번호
* pageCount 총 페이지 수
* URL 연결 주소
* 페이저(10, 1, 5, 'Index') 사용 예시
*/
함수 페이저(pageSize, pageIndex, pageCount, url) {
var intPage = 7; //숫자 표시
var intBeginPage = 0;//시작 페이지 수
var intEndPage = 0;//끝 페이지 번호
var intCrossPage =parseInt(intPage / 2); //표시된 숫자
var strPage = "

page" pageIndex "/" pageCount " 페이지당 페이지< ;font color='#FF0000'>" pageSize " 스트립";
If (pageIndex > 1) {
           strPage = strPage "홈페이지 ";
strPage = strPage "이전 페이지 }
(pageCount > intPage) {//전체 페이지 수가 페이지에 표시된 페이지 수보다 큰 경우
If (pageIndex > pageCount - intCrossPage) {//현재 페이지 번호 >총 페이지 수-3
               intBeginPage = pageCount - intPage 1;
               intEndPage = pageCount;
}
         그 외 {
If (pageIndex                   intBeginPage = 1;
                 intEndPage = intPage;
            }
             그 외 {
                  intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex intCrossPage;
            }
}
} 그 밖의 {
intBeginPage = 1;
          intEndPage = pageCount;
}
If (페이지수 > 0) {
for (var i = intBeginPage; i                 {
If (i == pageIndex) {//현재 페이지
                     strPage = strPage " " i " ";
                }
                   그 외 {
strPage = strPage " " i " 🎜>                 }
            }
}
}
If (pageIndex strPage = strPage "다음 페이지 a> ";
        strPage = strPage "尾页 ";
    }
    return strPage "

";
}

이 방법을 시도해 보세요

제조대码

http://www.w3.org/1999/xhtml">

   
   
   
   
   
머리>

   

       
           
               
               
               
               
               
               
               
               
               
               
               
           
        머리>
       
    테이블>
   

본문>

[/코드]

看下效果

列有点多，我只截图了part分，界face好丑，加点样式，用 bootstrap来美化下

Nuget 보안 부트스트랩 사용

加上样式后

虽说不是特别漂亮，但还是对得起观众吧。

代码下载https://github.com/dengjianjun/JsPager

如果觉得对你有帮助，请点个赞，谢谢！

고객 ID	회사명	연락처 이름	연락처 제목	주소	도시	지역	우편번호	국가	전화	팩스