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, obtener 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 registro 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> id </td> <td> FirstName </td> <td> LastName </td> <td> status </td> Personas "> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname} </ td > <td> {{emp.status}} </td> <td> {{emp.address}} </td> </tbody> </table> <tm-Pagination conf = "PaginationConf"> </tm-Pagination> </div> <script type = "text/javascript"> var app = angular.module ('deloApp', ['tm.pagination']); app.controller ('dEmocontroller', ['$ alcance', 'empresar postdata = {pageIndex: $ scope.paginationconf.currentPage, pageSize: $ scope.paginationConf.ItemSperPage} BusinessService.list (postdata) .Success (function (respuesta) {$ scope.pagationConf.totalitems = respuesta.count; $ scope.persons = respuesta); the basic parameters of paging $scope.paginationConf = {currentPage: 1,itemsPerPage: 5};/****************************************************************************************************************** When the page number and page record number change, monitoring background query If currentPage and itemsPerPage se monitorean por separado, se activarán dos eventos de fondo. ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/empleado/getAllEmployee', postdata);} return {list: function (postdata) {return list (postdata);}}}]); </script>El contenido anterior es el código de ejemplo que el editor le presenta para implementar la función de paginación basada en AngularJS. ¡Espero que sea útil para todos!