먼저 렌더링을 보여 드리겠습니다. 효과가 좋다고 생각되면 구현 코드를 참조하십시오.
JS에서 페이징을 쓰는 것은 이번이 처음이기 때문에 글쓰기는 완벽하지 않아야합니다. 일부 공개는 추출되지 않았지만 여전히 사용해도 괜찮습니다. 이 코드는 공개 페이징으로 취급 될 수 있습니다. 이 코드를 사용하여 약간 다른 두 페이징을 작성했습니다! 공통 코드 추출물은 주로 Ajax 배경과 반환 된 값이 다르기 때문에 유사합니다. 총 페이지 번호가 얻어지고 홈페이지/다음 페이지를 클릭하여 값을 올바르게 전달하는 한 기본적으로 페이지 매김에 아무런 문제가 없습니다.
인터넷에는 실제로 많은 페이징 플러그인과 오픈 소스 코드가 있습니다. 단일 책은 백엔드 개발 원숭이이며 Frontend CSS 및 기타 스타일은 여전히 통제 할 수 없으므로 직접 작성하기 시작했습니다. 실제로 페이징의 원리는 매우 간단합니다. ajax를 사용하여 값 (현재 페이지 번호)을 백그라운드로 전달하고 배경에서이를 페이지를 가져 오기 위해 한계를 사용하는 것입니다.
더 이상 고민하지 않고 코드를 업로드하십시오!
참고 :이 프로젝트는 프로세스 전반에 걸쳐 JS를 사용하여 작성되었습니다. 프론트 데스크 데이터는 Ajax를 통해 얻은 다음 페이지에 동적으로 조립 및로드됩니다.
1. 먼저 이전 페이지, 다음 페이지 등의 코드를 첨부합니다 (내부 값은 모든 의사 값이며 다음은 JS에서 재 할당됩니다!)
<ul id = "page"> <li id = "shouye"> <a href = 'javaScript : indexpage (1);'> home </a> </li> <li id = "shangyiye"> <a href = 'javaScript : indexpage (-1);'> <i> </i> previous page </a> <li> <a id = "" "" href = "JavaScript : void (0);" > 1 </a> </li> <li> <a id = "2"href = "javaScript : void (0);"; > 2 </a> </li> <li> <a id = "Three"href = "javaScript : void (0);" > 2 </a> </li> <li> <a id = "Three"href = "javaScript : void (0);" > 3 </a> </li> <li> <a id = "5"href = "javaScript : void (0);" > ... </a> </li> <li> <a id = "fore"href = "javaScript : void (0);" > 13855 </a> </li> <li class = 'p-next'> <a href = 'javaScript : indexpage (-3);' onclick = "jumptopage ( '2', '/goods/ajaxquerygoodslist.do.html', '', 'goodslistcontainer', '13855', listpagecallback);"> 다음 페이지 </i> </a> <li> <li id = "weiye"class = p-next '> <a href = 'JavaScript : void (0);' onclick = "indexpage (0);"> 마지막 페이지 </a> </li> <li> <span id = "span_number"> 총 13,855 페이지 <input type = "text"id = "input_number"/> page <input name = ""value = "식별"type = "버튼" onclick = "jumptopage (jquery ( '#input_number'). val (), '/goods/ajaxquerygoodslist.do.html', '', 'goodslistcontainer', '13855', listpagecallback);"/> </span> </ul>
2. 먼저 페이지에 두 개의 숨겨진 필드를 넣고 하나는 현재 페이지 번호이고 다른 하나는 총 페이지 번호입니다. 총 페이지 번호는로드 된 페이지이며 배경에서 쿼리 후 값이 직접 첨부됩니다. 현재 페이지 번호의 작동이없는 경우 현재 페이지 번호에 값을 할당해야합니다.
<입력 ID = "jiazai"type = "hidden"> </input> <!-현재 페이지 번호-> <입력 ID = "TotalPage"유형 = "hidden"> </input> <!-총 페이지 번호->
3. 페이지에로드 된 함수를 작성하고 총 페이지 번호와 현재 페이지 번호에 값을 할당하십시오.
$ (function () {$ ( '#jiazai'). val (1); // 현재 페이지 번호를 할당하면 기본값은 ajaxFunction (page, arg, chipssort, ''); //이 메소드가 추출 된 ajax 배경 액세스 방법});4. 추출 된 Ajax 방법. 이 페이지는이 메소드를 여러 번 사용하며, 페이지의 데이터가 Ajax를 통해 배경에서 얻어지고 배경은 목록 수집을 반환하기 때문에 모든 것이 수집됩니다.
// ajax 함수 추출 방법 ajaxfunction (page, arg, chipssort, fontval) {$. 데이터 : {page : sort : arg, chipssort : chipsort, fontval : fontval}, datatype : 'json', contenttype : 'application/x-www-form-urlencoded = utf-8', 성공 (데이터); commonFunction (data);}});}3. 볼거리가 많지 않아 마지막 코드가 없습니다.
// 문자열 철자 기능 commonFunction (data) {$ ( '#projectList'). find ( "li"). remove (); for (var i = 0; i <data.length; i ++) {/*****이 페이지가 문자열 철자가 많이 발생하기 때문에 많은 코드가 없기 때문에 공간이 없어지지 않기 때문에 ***/***/<br> <br>를 사용하지 않습니다. 시작은 (data.length> 0) {// 페이지 번호 var var var pading = data [0] .padingnum; // 총 페이지 번호 $ ( '#totalpage'). val (pading); var page = $ ( '#jiazai'). val (); // 현재 페이지 $ ( '#countpage'). html ( "b id = 'currentpageno'> "+page+"+"</b>/"+pading+"+"+"+" "); $ ( '##span_number'). html ("Total "+pading+"page to <input type = 'ind ='input_number 'class ='page-txtbox '/> page <input name =' 'value ='dection ''dectised ''value ' onclick = 'indexpage (-2)'/goods/ajaxquerygoodslist.do.html ',' ','goodslistcontainer ','+pading+" ', listpagecallback);'; class = 'page-btn'/> ")} else {$ ( '#countpage'). html ("<b id = 'currentPageno'> "+0+"</b>/"+0+" ");} // 홈 Page1 2 3 4 5 6 마지막 페이지 var [0]. href = "javaScript : void (0);"var nowpage = $ ( '#jiazai'). val (); // 현재 페이지 // 하나의 두 가지 5 개의 5 가지 <br> // 다음 코드는 더 번거롭게 보이지만 동일한 코드라는 것을 이해하기가 어렵지 않지만 (nowpage <5는 일부 판단이 추가됩니다. )) {$ ( '#one'). 텍스트 (1); $ ( '#one'). attr ( 'href', 'javaScript : pagenum ( "'+1+'");'); '); $ ('#two '). 텍스트 (2); $ ('#two '). att ('href ','javascript : ''+'+') (3); $ ( '#3'). attr ( 'href', 'javaScript : pagenum ( "'+(3)+'");'); $ ( '#5'). 텍스트 (4); $ ( '#5') ttr ( 'href', 'javaScript : pagenum ( "'+(4)+'");'); $ ( '#fore'). text (5); $ ( '#fore'); 텍스트 (5); $ ( '#fore'). e '). attr ('href ','javaScript : pagenum ( " '+(5)+'"); '); $ ('#5 '). parent (). show (); $ ('#fore '). parent (). show ();} else {// alert ( "5 번째 페이지가 아니다"); owpage) -2); $ ( '#one'). attr ( 'href', 'javaScript : indexPage ( "'+(number (number (number) -2)+'");'); $ ( '#two'). 텍스트 (number (nowpage) -1); $ ( '#two'). att ( 'href', 'javascript (' ' +(number (nowpage) -1)+' ");'); $ ( '#Three'). 텍스트 (nowpage); $ ( '#Three'). attr ( 'href', 'javaScript : indexpage ("'+(nowpage)+' ");'); $ ( '#5'). parent () If (number (nowpage) +1> pading) {$ ( '#5'). parent (). hide (); $ ( '##fore'). parent (). hide ();} else {$ ( '#5'). parent (). show (); $ ( '#5'). text (n owpage) +1); $ ( '#5'). attr ( 'href', 'javaScript : indexpage ( "'+(number (number) +1)+'");'); lse {$ ( '#fore'). parent (). show (); $ ( '#ord'). 텍스트 (숫자 (nowl (nowpage) +2); $ ( 'href', 'javaScript : indexpage ( "'+(numpage) +2)+'");'); if (pading == 0) {$ ( '#one'). parent (). hide (); heide (); $ ( '#two'). parent (). hide (); $ ( '##three'). parent (). hide (); $ ( '#5') if (pading == 1) {$ ( '#shouye'). hide (); $ ( '#weiye'). hide (); $ ( '#one'). parent (). hide (); $ ( '#two'). parent ( ) .hide (); $ ( '#Three'). parent (). hide (); $ ( '#5'). parent (). hide (); $ ( '#fore'). parent (). hide ();} else if (pading == 2) {$ ( '#one'). parent (). show (); $ ( '#two'). parent (). show (); $ ( '#3'). 부모 (). hide (); $ ( '#5') if (pading == 3) {$ ( '#one'). parent (). show (); $ ( '#two'). parent (). show (); $ ( '#3'). parent (). show (); $ ( '#5') if (pading == 4) {$ ( '#one'). parent (). show (); $ ( '#two'). parent (). show (); $ ( '#3'). parent (). show (); $ ( '#5'). parent (); $ ( '#fore'). hide (). ) .parent (). show (); $ ( '#2'). parent (). show (); $ ( '#Three'). parent (). show (); $ ( '##5'). parent (). show (); $ ( '#Fore'). show ();} // 2는 첫 번째 페이지에 있고 2는 두 번째 페이지에 있습니다. a '). 각 (function () {$ (this) .parent (). removeClass ( "current"); if ($ (this) .text () == nowpage) {$ (this). addClass ( "current");}}); // paging $ ( "html, body"). 500); // 마지막으로 1 $ ( '#jiazai'). val (number (bianlaing)+번호 (1)); }좋아, 페이지가 여기에 완료되었습니다. 사용해야하는 경우 내 코드를 이해하는 데 시간이 걸릴 수 있습니다. 실제로 코드는 어렵지 않습니다. 나는 그것을 쓰기 위해 2 시간 동안 사용했습니다. 한 줄로 읽고 주석을 직접 추가하십시오. 이 작품을 끝내면 30 분 안에 확실히 이루어질 것입니다!