En muchas páginas del proyecto, se usa la paginación, y cada página tiene muchos códigos de paginación duplicados. Así que escribí una instrucción de paginación simple para simplificar el código de página y ser fácil de mantener. Lo escribí en el blog como una copia de seguridad para facilitar el acceso en el futuro.
Estos son los pasos para definir la directiva y su aplicación:
1. Definición de directiva
Defina un archivo JS, Page-Directive.js, que se utiliza para escribir el código de instrucción de paginación. Este archivo contiene la plantilla de paginación. Los siguientes son todos los códigos en el archivo JS:
'Use Strict'; (function () {Angular.module ('Template/PageInit/PageInit.html', []. ng-class = "{DISPABLE: PageData.CurrentPage == 1}">/n '+' <a href = "javascript: void (0);" <a href = "javascript: void (0);"; Page == Pagedata.totalPage} ">/n '+' <a ng-if =" página! =/'.../' "href =" javascript: void (0); "ng-class =" {/'bg-custom/': page == Pagedata.currentPage} "ng-click =" on_loadpage (página, tabdata) }} </a>/n '+' <a ng-if = "page ==/'.../'" href = "javascript: void (0);" ng-class = "{discapacitado: pagagedata.currentPage == Pagedata.totalPage}">/n '+' <a href = "javascript: void (0);" ng-model = "inPage">/n '+' <input type = "Button" value = "saltar" ng-cHick = "on_loadPage (inPage)"> </iv>/n '+' </li>/n '+' <li> <a href = "#"> <span> total {{Pagedata.count}}} </span> </a> </li>/n ' '</ul>/n'+ ');}]); tattrs.templateUrl || }; .Provider ('PageInTemplate', function () {var templatePath = 'Template/pageInit/pageInit.html'; this.setPath = function (path) {templatePath = path;}; this. $ get = function () {return {getPath: function () {return Tempath;}};});2. Control de estilo de paginación
Se recomienda escribirlo en un archivo .css separado. Primero, cree un nuevo archivo de PageSync.css. El siguiente es el estilo específico.
.pagination-main {display: inline-block; ROLED-LAFUERA: 0; margen: 0 0; Border-Radius: 4px; vertical-align: Middle;}. Pagination-Main Li.prev-Page> a {border: 0;}. Pagination-Main Li.next-Page> A {Border: 0; Border-izquierda: 1px; margen-izquierda: 0;}. Pagination-Main Li.first-Page> A {border-top-izquierda-radius: 0; Border-fondo-izquierda-radia: 0;}. Pagination-Main li.last-PAGE> A {border-top-right-radius: 0; Border-Bottom-Right-Radius: 0;}. Pagination-Main li div {ancho: 80px; border: 1px sólido #ddddddd; background-color: #ffffff; float: left; lefa: 0;}. paginación-main li.skip-page entrada [type = 'text'] {widshi Center;}. Pagination-Main Li.skip-Page Entrada [type = 'Button'] {relleno: 0 4px 1px 10px; border: 0; borde-izquierda: 1px sólido #dddddd; #ffffffff} .pagination-main li.data-num> a {border: 0; margen-izquierda: 0;}. pagination-main> li {display: inline;}. Pagination-Main> li: First-Child> A, .pagination-Main> Li: First-Child> Span { /*Margin-Left: 0; border-top-izquierda-radio: 4px; Border-Bottom-Left-Radius: .Active> a, .pagination-Main> .Active> Span, .pagination-Main> .Active> A: Hover, .pagination-Main> .Active> Span: Hover, .Pagination-M-ACTIVE> A: Focus, .Pagination-Main> .Active> A: Focus,. Color: #fff; cursor: predeterminado; Color de fondo: #428BCA; color de borde: #428bca;}. paginación-main> li> a, .pagination-main> li> span {posicion: relativo; flotante: izquierda; /*paginación: 6px 12px;*/ relleno: 1px 8px; margen -izquierda: -1px; Línea de altura: 1.42857143; Color: #428BCA; Decoración de texto: ninguna; Color de fondo: #fff; border: 1px solid #ddd;}.pagination-main > .disabled > span:hover,.pagination-main > .disabled > span:hover,.pagination-main > .disabled > span:focus,.pagination-main > .disabled > a,.pagination-main > .disabled > a:hover,.pagination-main > .disabled > a:focus { color: #999; cursor: no permitido; Color de fondo: #fff; color de borde: #ddd;}3. Método de consulta de paginación
He personalizado el método de consulta de paginación en fábrica, que es compartida y conveniente para el mantenimiento del código. La interacción con el fondo en Angular es asíncrono de forma predeterminada. Lo escribí como una consulta sincrónica aquí. Primero, defina el archivo JS PageSync.service.js. El siguiente es todo el contenido de la fábrica:
'use estrict'; angular.module ('app'). factory ('pageSync', ['$ http', '$ q', function page ($ http, $ q) {var rowCollectionPage = []; var totalpage = 1; var pageS = []; var endpage = 1; var foOW = function, currentPagePage, powageSize, defered) {RowCollectionPage: [], TotalPage: 1, CurrentPage: CurrentPage? EndPage = TotalPage; json.pages = Pages; Considerado para tener datos. i = 1; } else if ((TotalPage - CurrentPage) <= 3) {temp = [TotalPage - 6, TotalPage - 5, TotalPage - 4, TotalPage - 3, TotalPage - 2, TotalPage - 1, TotalPage]; }; / La altura de la tabla en el proyecto se calcula en función de la altura de la ventana del navegador y es dinámica // porque la página se fijará en la parte inferior de la tabla, use líneas vacías para no tener datos en lugar de var Setpagerow = Function (RowArr, PageSize) {var temp = []; temp.push (Rowarr [i]); PageSize) {var defired = $ q.defer (); '&' + CurrentPage + '&' + PageSize; LoadPage: Function (URL, CurrentPage, PageSize, Page) {var deferred = $ q.defer ();4. Use comandos
1). Código en la página:
En mi código, la página está escrita en el tfoot en la tabla. Prev (), Next () y LoadPage (página) son todos los métodos definidos en el controlador correspondiente de la página.
<Able> <thead> <tr> <th> número de serie </th> <th> nombre de columna 1 </th> <th> nombre de columna 2 </th> <th> operación </th> </tr> </thead> <tbody> <tr ng-if = "! notable" ng-repeat = "row en pagedata.rowcollectionPage"> <td> {{{{{{{{{{{{{{{{{{{{{{{{ $ índice+1+(PageGa.CurrentPage-1)*PageSize: ''}} </td> <td> {{row.args1}} </td> <td> {{row.args2}}} </td> <td> {{{row.args2}}} </td> <tdyle = "text:" Center; "> <a href = '#'> modificar </a> </td> </tr> <tr ng-if =" notableAtA "ng-repeat =" datos en pagagedata.rowCollectionPage "> <td ng-if =" $ index == 0 "colspan =" 4 "style =" text-align: center; " </td> <td ng-if = "$ index! = 0" colspan = "4"> </td> </tr> </tbody> <tfoot> <tr> <td style = "text-align: centro;" colspan = "6"> <Div> <Page-init PageData = "PageData" prev = "prev ()" next = "next ()" Load-Page = "LoadPage (PAGE)"> </page-init> </div> </td> </td> </tr> </tfoot> </table>2) .Code en el controlador
Primero, debe hacer referencia a la fábrica y a las páginas de referencia en el controlador, como sigue:
angular.module ('app'). controler ('myctrl', function (pageSync) {});
Antes de la consulta de paginación, debe preparar algo de preparación:
// Pagedata establece el conjunto de datos de la página, el número total de páginas, el conjunto de números de página y el número total de datos. La carga de carga es un parámetro personalizado para registrar el estado de tiempo (antes de acceder a los datos y después de devolver los datos)
$ scope.pagedata = {RowCollectionPage: [], TotalPage: 1, CurrentPage: 1, páginas: [], cuenta: 0, Tiempo de carga: 'antes'};
// Esto se usa para calcular la altura de la tabla, de acuerdo con la situación real.
$ Scope.tabheight = $ Scope.Height-48-37-10-42-5;
// Calcule cuántas filas de datos están realmente en una página
$ scope.pagesize = parseInt (($ scope.tabheight-15-34-34-39)/34);
Luego escriba el siguiente método en el controlador
// consulta de paginación $ scope.load = function (fila) {$ scope.surgeonpagedata.rowCollectionPage = comunor.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 == 'After' && $ scope.pagedata.count == 0) || $ scope.pagegedata.loadtime = antes ') });}; // Página siguiente $ scope.next = function () {if ($ scope.pagedata.currentPage <$ scope.pagedata.totalpage) {pageSync.next (url, $ scope.pagegage.currentPage, $ scope.pagesize) .then (function) {$ scope.pope.page = data;}); }}; // página anterior $ scope.prev = function () {if ($ scope.pagedata.currentPage> 1) {pagesync.prev (url, $ scope.pagedata.currentPage, $ scope.pagesize) .then (función (datos) {$ scope.pagedata = data;}); }}; // Haga clic en el número de página para saltar $ scope.loadPage = function (página) {$ scope.inpage = undefined; var intpage; if (typeof page == 'string') {if (page! = "") {intpage = parseInt (página, 10); } else {intpage = 0; }} else {intpage = page; } if ($ scope.pagedata.totalpage <= 1) {} else if (intpage == undefined || intpage == null) {alert ('¡Complete el número de página de salto!'); } else if (intpage <= 0 || intpage> $ scope.pagedata.totalpage) {alert ('el número de página de salto debe ser mayor que 0, menor que el 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 (data) {$ scope.pagedata = data;}); }};5. Resultados
El efecto de implementación final es el siguiente:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.