프로젝트의 많은 페이지에서 Pagination이 사용되며 각 페이지에는 많은 중복 페이지 매김 코드가 있습니다. 그래서 나는 페이지 코드를 단순화하고 유지하기 쉽기 위해 간단한 페이지 매김 지침을 작성했습니다. 나는 나중에 쉽게 액세스 할 수있는 백업으로 블로그에서 그것을 썼습니다.
다음은 지침과 응용 프로그램을 정의하는 단계입니다.
1. 지침 정의
페이징 지침 코드를 작성하는 데 사용되는 JS 파일 인 Page-Directive.js를 정의하십시오. 이 파일에는 페이징 템플릿이 포함되어 있습니다. 다음은 JS 파일의 모든 코드입니다.
'strict'; ng-class = "{disabled : pagedata.currentpage == 1}">/n '+'<a href = "javaScript : void (0);" <a href = "javaScript : void (0);"ng-click = "on_prev ()"> <span> </span> </a>/n '+'</li>/n '+'<li ng-repeat = "pagedata.pages"ng class = "{/'First-Page/' page == pagedata.totalpage} ">/n '+'<a ng-if ="page! =/'.../' "href ="javaScript : void (0); "ng class ="{/'bg-custom/': page == pagedata.currentPage} "ng-click ="{page, tabdata) "{page). }} </a>/n '+'<a ng-if = "page ==/'.../'"href = "javaScript : void (0);" ng-class = "{disabled : pagedata.currentpage == pagedata.totalpage}">/n '+'<javaScript : void (0); ng-model = "inpage">/n '+'<입력 유형 = "button"value = "jump"ng-click = "on_loadpage (inpage)"> </div>/n '+'</li>/n '+'<li> <a href = "#"> <span> 총 {{pagedata.count}} </a> </li>/n '+ '</ul>/n'+ '); || function (scope.next). {template/pageinit.html ';2. Pagination Style Control
별도의 .CSS 파일로 작성하는 것이 좋습니다. 먼저 새 pageync.css 파일을 만듭니다. 다음은 특정 스타일입니다.
.Pagination-Main {디스플레이 : 인라인 블록; 왼쪽 패딩 : 0; 여백 : 0 0; Border-Radius : 4px; 수직-정상 : 중간;}. Pagination-Main Li.prev-page> a {border : 0;}. Pagination-Main Li.next-Page> a {border : 0; 왼쪽 경계 : 1px; 마진-왼쪽 : 0;}. Pagination-Main Li.first-Page> a {Border-Top-Left-Radius : 0; 국경-바닥-왼쪽-라디우스 : 0;}. Pagination-Main Li.last-Page> a {Border-Top-Right-Radius : 0; Border-Bottom-Right-Radius : 0;}. Paglination-Main Li Div {Width : 80px; Border : 1px Solid #dddddd; 배경색 : #ffffff; float : 왼쪽; 패딩 : 0;}. Pagination-Main Li.skip-page input [type = 'text'] {width : 24px;}; li.skip-page input [type = 'button'] {패딩 : 0 4px 1px 10px; 테두리 : 0; 경계-왼쪽 : 1px solid #dddddd; 배경 색 : #ffffff} .Pagination-Main li.data-num> a {border : 0; margin-left : 0;}. Pagination-Main> li {display : inline;}. Pagination-Main> li : First-Child> A, .Pagination-Main> li : First-Child> span { /*margin-left : 0; 국경-왼쪽-라디우스 : 4px; Border-Bottom-Left-Radius : .active> a, .pagination-main> .active> span, .pagination-main> .active> a : hover, .pagination-main> .active> span : hover, .pagination-main> .Active> a : focus, .pagination-main> .active> a : pagination-main>. 색상 : #fff; 커서 : 기본값; 배경색 : #428BCA; 국경 색상 : #428bca;}. Pagination-Main> li> a, .pagination-main> li> span {position : repantative; 플로트 : 왼쪽; /*Pagination : 6px 12px;*/ 패딩 : 1px 8px; 마진 왼쪽 : -1px; 라인 높이 : 1.42857143; 색상 : #428BCA; 텍스트 결정 : 없음; 배경색 : #fff; 국경 : 1px solid #ddd;}. Pagination-Main> .Disabled> span : 호버, .pagination-main> .Disabled> span : hover, .pagination-main> .disabler> .pagination-main> .disabled> a, .pagination-main> .Disabled> a : hoverinabled> .Disabinding>. 커서 : 말도 안됩니다. 배경색 : #fff; 국경 색 : #ddd;}3. Pagination 쿼리 방법
공유에서 Pagination Query 방법을 사용자 정의했는데, 이는 코드 유지 보수를 위해 공유되고 편리합니다. Angular의 배경과의 상호 작용은 기본적으로 비동기식입니다. 여기에 동기 쿼리로 썼습니다. 먼저 js 파일 pagesync.service.js를 정의하십시오. 다음은 공장의 전체 내용입니다.
'strict'; angular.module ( 'app'). factory ( 'pageync', [ '$ http', '$ q', 함수 페이지 ($ http, $ q) {var rowCollectionPage = []; var totalpage = 1; var pages = []; var endpage = 1; var load = function (url, currentpage, pagsize, deferred). {RowCollectionPage : [], TotalPage : 1, CurrentPage : CurrentPage : 1, Pages : []}; TotalPage; TotalPage <= 7) {pages = getPageshigh (TotalPage); pages; json.count. *는 또한 기록 된 상태라고 말할 수있다. I <empage+1; (TotalPage <= 3) {Tompage -6, TotalPage -5, TotalPage -3, TotalPage -2, TotalPage} [CurrentPage -2, CurrentPage, CurrentPage + 2, retover. 프로젝트의 테이블 높이는 브라우저 창의 높이에 따라 계산되며 동적 // 페이지가 테이블 하단에 고정되어야하기 때문에 var setpagerow = function (rowarr, pagesize) {var temp = [] for (var i = 0; rowarr.l); } (var j = 0; rowarr.length; $ q.defer (). RETOR LOAD (URL, Pagesize, Deferred); Deferred = $ q.defer (currentPage! = page);4. 명령을 사용하십시오
1). 페이지의 코드 :
내 코드에서 페이지는 테이블의 tfoot에 작성됩니다. prev (), next () 및 loadpage (페이지)는 모든 페이지의 해당 컨트롤러에 정의 된 메소드입니다.
<table> <thead> <tr> <th> 일련 번호 </th> <th> 열 이름 1 </th> <th> 열 이름 2 </th> <th> 작동 </th> </tr> </thead> <tbody> <tr ng-if = "! notabledata"ng-repeat = "pagedata.rowcollectionpage의 행 $ index+1+(pagedata.currentPage-1)*pagesize : ''}}} </td> <td> {{row.args1}} </td> <td> {{row.args2}} </td> <td> {row.args2}} </td> <td> < "> href = '#'> modify </a> </td> </tr> <tr ng-if = "notabledata"ng-repeat = "pagedata.rowcollectionpage"> <td ng-if = "$ index == 0"colspan = "4"style = "text-align :"> no data! </td> <td ng-if = "$ index! = 0"colspan = "4"> </td> </tr> </tbody> <tfoot> <tfet> <td> <td> <tf> <tf <td style = "text-align : center;" colspan = "6"> <div> <page-init page-data = "pagedata"prev = "prev ()"next = "next ="next () "load-page ="loadpage (page) "> </page-init> </div> </td> </td> </tfet> </tfoot> </table>2). 컨트롤러의 코드
먼저 다음과 같이 컨트롤러에서 공장 및 참조 PageSync를 참조해야합니다.
Angular.Module ( 'app'). 컨트롤러 ( 'myctrl', function (pageSync) {});
페이지 매김 쿼리 전에 몇 가지 준비를해야합니다.
// pagedata는 페이지 데이터 세트, 총 페이지 수, 페이지 번호 세트 및 총 데이터 수를 설정합니다. 로드 타임
$ SCOPE.PADERATA = {rowCollectionPage : [], TotalPage : 1, CurrentPage : 1, Pages : [], Count : 0, loadtime : '~'};
// 실제 상황에 따라 테이블 높이를 계산하는 데 사용됩니다.
$ scope.tabheight = $ scope.height-48-37-10-42-5;
// 실제로 페이지에 얼마나 많은 데이터 행이 있는지 계산합니다.
$ scope.pagesize = parseint (($ scope.tabheight-15-34-34-39)/34);
그런 다음 컨트롤러에 다음 방법을 작성하십시오
// Pagination query $ scope.load = function (row) {$ scope.surgeonpagedata.rowcollectionpage = common.setpagerow ([], $ scope.pagesize); $ SCOPE.NOSURGEONDATA = FALSE; $ scope.surgeonpagedata.loadtime = '이전'; pagesync.load (url, $ scope.pageata.currentpage, $ scope.pagesize) .then (function (data) {$ scope.pagegata = data; if (($ scope.pagedata.loadtime = 'apont'&& $ scope.pagedata.count == 0) || $ scope.pageatata.loadtata == ')) {indayed'). });}; // 다음 페이지 $ page $ scope.next = function () {if ($ scope.pagedata.currentPage.pagedata.totalPage) {pagesync.next (url, $ scope.pagedata.currentPage, $ scope.pagesize). }}; // 이전 페이지 $ page $ scope.prev = function () {if ($ scope.pagedata.currentPage> 1) {pagesync.prev (url, $ scope.pagedata.currentPage, $ scope.pagesize) .then (function (data) {$ scope.pagedata = data); }}; // 페이지 번호를 클릭하여 $ scope.loadpage = function (page) {$ scope.inpage = undefined; var intpage; if (typeof page == 'string') {if (page! = "") {intpage = parseint (page, 10); } else {intpage = 0; }} else {intpage = page; } if ($ scope.pagedata.totalPage <= 1) {} else if (intpage == undefined || intpage == null) {alert ( '점프 페이지 번호를 채우십시오!'); } else if (intpage <= 0 || intpage> $ scope.pagedata.totalPage) {alert ( '점프 페이지 번호는 0보다 크기 때문에 총 페이지'+$ scope.pagedata.totalPage)보다 작아야합니다. } else if ($ scope.pagedata.currentPage! = page) {pagesync.loadPage (url, $ scope.pagega.currentPage, $ scope.pagesize, page) .then (function (data) {$ scope.pagedata = data;}); }};5. 결과
최종 구현 효과는 다음과 같습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.