Implementación de la paginación basada en AngularJS
Prefacio
Antes de aprender cualquier idioma, debe haber negocios necesarios para llevarlo a aprenderlo. Por supuesto, NG no es una excepción. Antes de aprender NG, la primera demostración que quería hacer era implementar la paginación basada en NG. Además de la idea de computación básica, es utilizar instrucciones para encapsularla en un complemento y hacer referencia directamente a la página que necesita paginación.
Complemento
Cuando encapsulé el complemento de paginación, implementé varios métodos en general, y finalmente encontré un complemento encapsulado por un amigo (http://www.miaoyueyue.com/archives/813.html). Sentí que era bastante bueno, así que leí su código fuente y lo usé directamente en el proyecto.
Principios e instrucciones para su uso
1. El código fuente del complemento se implementa principalmente en función de la directiva Angular.
2. El punto clave al llamar es la función de procesamiento de solicitudes de fondo, es decir, para recuperar datos de fondo.
3. El complemento tiene dos parámetros clave: CurrentPage, ElementsperPage, el número de página actual y el número de registros por página.
4. Después de implementar la llamada de método, necesitamos volver a enviar los antecedentes para obtener los datos del número de página correspondientes en función de cada clic en el número de página del complemento de paginación. En el número de página de la llamada usé $ Watch para monitorear. Cuando lo usé por primera vez, puse la función de llamadas en el cambio de complemento, pero descubrí que el fondo se activará dos veces cada vez. Este lugar necesita atención.
5. Encapsulo el fondo de solicitud en una capa de servicio y luego lo llamo al controlador, lo que también está en línea con la idea de MVC.
Diagrama de reproducción
Código de llamada
<Div ng-app = "DemoApp" Ng-Controller = "Democontroller"> <Table> <Thead> <tr> <TD <TD> <TD> ID </td> <TD> FirstName </td> <TD> LastName </td> <TD> status </td> <td> Dirección </td> </tr> </thead> ng-repeat = "empero en personas"> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}}}} </td> <td> {{emp.status}}} </td> <TD> {{emp.address}} </td> </tr> </tbody> </bable> <tm-Pagination conf = "PagationConf"> </tm-pagination> </iv> <script type = "text/javaScript"> var app = angular.module ('damoapp', ['tm.pagination']); App.Controller ('Democontroller', ['$ scope', 'BusinessService', function ($ scope, BusinessService) {var getAllEmloyee = function () {var postdata = {pageIndex: $ scope.paginationconf.currentPage, pageSize: $ scope.pagination conconf.itemsperpage}} BusinessService.list (postdata) .success (function (respuesta) {$ scope.paginationConf.totalItems = respuesta.count; $ scope.persons = respuesta.items;}); /*********************************************************************************** Cuando cambien los números de página y los registros de la página, monitoreando la consulta de fondo si la página actual se monitorea por separado, se ajustan dos eventos de fondo. $ alcance. $ watch ('PagationConf.CurrentPage + PagationConf.ItemSperPage', GetAllEmployee); // Business Class App.Factory ('BusinessService', ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/empleado/getAllemloyee', postdata);} return {list: function (functats) {return list (postdata);}}}]); </script script>Descargas de complementos y demostración
http://yunpan.cn/cqehnlrpnkniq Acceso contraseña Be74
Lo anterior es la información que AngularJS implementa la función de paginación. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio web!