Em muitas páginas do projeto, a paginação é usada e cada página possui muitos códigos de paginação duplicados. Por isso, escrevi uma instrução simples de paginação para simplificar o código da página e ser fácil de manter. Eu escrevi no blog como um backup para facilitar o acesso no futuro.
Aqui estão as etapas para definir a diretiva e sua aplicação:
1. Definição de diretiva
Defina um arquivo JS, Page-Directive.js, que é usado para gravar código de instrução de paginação. Este arquivo contém o modelo de paginação. A seguir, são apresentados todos os códigos no arquivo JS:
'Use Strict'; (function () {angular.module ('modelo/pageinit/pageinit.html', []). RUN (['$ templatecache', function ($ templatecache) {$ templatecache.put ('model/pageinit.html', '' '' '' '<lematecache.put.' ng-class = "{desativado: Pagedata.currentPage == 1}">/n '+' <a href = "javascript: void (0);" ng-click = "on_loadpage (1)"> <span> </span> </a>/n'. '<a href = "javascript: void (0);" ng-click = "on_prev ()"> <pan> </span> </a>/n'+ '</li>/n'+ '<li ng-repeat = "PageTaTa.Pages" ng-class = "{/' primarpagep = PAGE/': Pageata.pages.pages"/'/'/' {'primeita página == PAGEDATA.TOTALPAGE} ">/n '+' <a ng-if =" Page! =/'.../' "href =" javascript: void (0); "ng-class =" {/'bg-custom/': Page == Pageata.CurrentPage} "nglick }} </a>/n '+' <a ng-if = "página ==/'.../'" href = "javascript: void (0);" ng-class = "{/'bg-custom/': página == PAGEDATA.CURRENT}" " ng-class = "{desativado: Pagedata.currentPage == Pagedata.totalpage}">/n '+' <a href = "javascript: void (0); Plante de espaço local = "" ng-model = "inpage">/n '+' <input type = "button" value = "jump" ng-click = "on_loadpage (inpage)"> </div>/n '+' </li>/n '+' <li> <a href = "#"> <pan> total {{Pagedata.count}} </span> </a> </li>/n '+' </ul>/n '+'); 'Ae', templateurl: function (televisão, tattrs) {return tattrs.templateurl || pageinittemplate.getpath (); if (Scope.Prev) {Scope.Prev (); }; }). Ligue (janela);2 Controle de estilo de paginação
Recomenda -se escrevê -lo em um arquivo .css separado. Primeiro, crie um novo arquivo PageSync.css. O seguinte é o estilo específico.
.Pagination-Main {Display: Inline-Block; preenchimento-esquerda: 0; margem: 0 0; Radio de fronteira: 4px; Alinhamento vertical: Médio;}. Paginação-Main Li.Prev-PAGE> A {Border: 0;}. PAGINA-MAIN LI.NEXT-PAGE> A {Border: 0; Border-Ift: 1px; margem-esquerda: 0;}. Paginação-main li. na primeira página> a {borda-top-left-radius: 0; Radio-de-borboleta-esquerda: 0;}. PAGINA-PAIN LI.LAST-PAGE> A {Border-top-Right-Radius: 0; Radio-de-borda-de-canto-direita: 0;}. Paginação-main li div {largura: 80px; borda: 1px sólido #dddddd; cor de fundo: #ffffff; float: esquerda; preenchimento: 0;}. centro;}. margem-esquerda: 0;}. Paginação-main> li {display: inline;}. Paginação-main> li: primeiro filho> a, .pagination-main> li: primeiro filho> span { /*margin-left: 0; Radio de borda-top-esquerda: 4px; Rádio-de-borda-esquerda: .Active> a, .Paginação-main> .Active> span, .Paginação-main> .Active> A: Passe o mouse, .Pagination-Main> .Active> span: pairar, .Pagination-Main> .Active> A: Focus, .pagination-Main> .Active> A: Focus,. Cor: #FFF; Cursor: padrão; Background-Color: #428BCA; Border-cor: #428BCA;}. PAGINA-MAIN> LI> A, .PAGINATION-MAIN> LI> SPAN {POSIÇÃO: relativa; flutuar: esquerda; /*paginação: 6px 12px;*/ preenchimento: 1px 8px; margem -esquerda: -1px; altura da linha: 1.42857143; Cor: #428BCA; Decoração de texto: Nenhum; Background-Color: #FFF; borda: 1px sólido #ddd;}.-main de paginação> .disabled> span: pairar, .paginação-main> .disabled> span: pairar, .pagination-main> .disabled> span: focacabled, .pagination-main> .disabled> a, .pagination>. Cursor: não superado; Background-Color: #FFF; Border-Color: #DDD;}3. Método de consulta de paginação
Eu personalizei o método de consulta de paginação na fábrica, que é compartilhado e conveniente para manutenção de código. A interação com o fundo em Angular é assíncrona por padrão. Eu escrevi como uma consulta síncrona aqui. Primeiro, defina o arquivo js pagageSync.service.js. A seguir, é apresentado todo o conteúdo da fábrica:
'Use Strict'; Angular.Module ('App'). {CollectionPage: [], TotalPage: 1, CurrentPage: CurrentPage? Endpage = Totalpage; JSON.PAGES = Páginas; PATADATA.CONTE DA PATADA. função (totalpage) {var temp = []; [1, 2, 3, 4, 5, '...', TotalPage]; CurrentPage + 2, '...', TotalPage]; i <rowarr.lenght; Carregar: Url, Página de Current, PageSe) {var diferido = $ Q.Defer (); Current, Url + = ' + Página de CurrentPage +' + Pages; PageSize, diferido);4. Use comandos
1). Código na página:
No meu código, a página está escrita no Tfoot na tabela. Anterior (), Next () e LoadPage (Page) são todos os métodos definidos no controlador correspondente da página.
<table> <Thead> <tr> <th> Número de série </th> <th> Nome da coluna 1 </th> <th> Nome da coluna 2 </th> <th> operação </th> </tr> </thead> <tbody> <tr ng-if = "! $ index+1+(Pagedata.currentPage-1)*Pagesize: ''}} </td> <td> {{row.args1}} </td> <td> {{row.args2} </td> <td> {{rode Center; "> <a href = '#'> modificar </a> </td> </tr> <tr ng-if =" notabledata "ng-repeat =" Dados em Pagedata.rowCollectionPage "> <td ng-if =" $ index == 0 "colspan =" 4 "estilo" ""; </td> <td ng-if = "$ index! = 0" colspan = "4"> </td> </tr> </tbody> <tfoot> <tr> <td style = "text-align: Center;" colspan = "6"> <div> <página-init página data = "pagedata" prev = "prev ()" next = "next ()" load-page = "loadpage (página)"> </age-init> </div> </td> </td> </tr> </tfoot> </tabela>2) .Code no controlador
Primeiro, você precisa fazer referência à fábrica e fazer referência a Pagesync no controlador, como segue:
Angular.Module ('App').
Antes da consulta de paginação, você precisa fazer alguma preparação:
// Pagedata define o conjunto de dados da página, o número total de páginas, o conjunto de números da página e o número total de dados. O LargetTime é um parâmetro personalizado para registrar o status de tempo (antes de acessar dados e depois de retornar dados)
$ scope.pagedata = {rowcollectionPage: [], totalpage: 1, currentpage: 1, páginas: [], contagem: 0, carregamento de tempo: 'antes'};
// Isso é usado para calcular a altura da tabela, de acordo com a situação real.
$ scope.tabHeight = $ scope.Height-48-37-10-42-5;
// Calcule quantas linhas de dados estão realmente em uma página
$ scope.pagesize = parseint (($ scope.tabheight-15-34-34-39)/34);
Em seguida, escreva o seguinte método no controlador
// consulta de paginação $ scope.load = function (linha) {$ scope.surgeonPagedata.rowCollectionPage = Common.setPageRow ([], $ scope.pagesize); $ scope.nosurgeondata = false; $ scope.surgeOnPagedata.loadTime = 'antes'; Pagesync.load (url, $ scope.pagedata.currentpage, $ scope.pagesize) .then (function (data) {$ scope.pagedata = data; if (($ scope.pagedata.loadtime == 'depois' && $ scope.Pagedata.count == 0) | $ scope.notabledata = true; $ scope.pagedata = dados;}); }}; // página anterior $ scope.prev = function () {if ($ scope.pagedata.currentpage> 1) {paagesync.prev (url, $ scope.pagedata.currentpage, $ scope.pagesize) .then (function (data) {scope.pagedata, scope.pagesize). }}; // Clique no número da página para saltar $ scope.loadpage = function (página) {$ scope.inpage = indefinido; var intpage; if (typeof página == 'string') {if (página! = "") {intpage = parseint (página, 10); } else {intpage = 0; }} else {intpage = Page; } if ($ scope.pagedata.totalpage <= 1) {} else if (intpage == indefinido || intpage == null) {alert ('Por favor, preencha o número da página de salto!'); } else if (intpage <= 0 || intpage> $ scope.pagedata.totalpage) {alert ('O número da página de salto deve ser maior que 0, menor que o número total de páginas+$ scope.pagedata.totalpage); } else if ($ scope.pagedata.currentPage! = Page) {Pagesync.loadPage (url, $ scope.pagedata.currentpage, $ scope.pagesize, página) .then (function (dados) {$ scope.pagedata = data;}); }};5. Resultados
O efeito final da implementação é o seguinte:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.