Implementando a paginação baseada em angularJs
Prefácio
Antes de aprender qualquer idioma, deve haver negócios precisam levá -lo a aprendê -lo. Claro, Ng não é exceção. Antes de aprender NG, a primeira demonstração que eu queria era implementar a paginação com base no NG. Além da ideia básica de computação, é usar instruções para encapsulá-la em um plug-in e referenciá-la diretamente na página de lista que precisa de paginação.
Plugin
Ao encapsular o plug-in de paginação, implementei vários métodos em geral e finalmente encontrei um plug-in encapsulado por um amigo (http://www.miaoyueyue.com/archives/813.html). Eu senti que era muito bom, então li o código -fonte dele e o usei diretamente no projeto.
Princípios e instruções para uso
1. O código-fonte do plug-in é implementado principalmente com base na diretiva angular.
2. O ponto principal em que a chamada é a função de processamento de solicitação de plano de fundo, ou seja, para recuperar dados do plano de fundo.
3. O plug-in possui dois parâmetros principais: CurrentPage, ItsPage, o número da página atual e o número de registros por página.
4. Após a implementação da chamada do método, precisamos reenviar o plano de fundo para obter os dados do número de página correspondentes com base em cada clique no número da página do plug-in de paginação. Na página Número da chamada que usei $ relógio para monitorar. Quando o usei pela primeira vez, coloquei a função de chamada no cenário do plug-in, mas descobri que o plano de fundo será acionado duas vezes a cada vez. Este lugar precisa de atenção.
5. Encapsulei o plano de fundo da solicitação em uma camada de serviço e depois a ligo no controlador, que também está alinhado com a ideia do MVC.
Diagrama de reprodução
Código de chamada
<div ng-app="DemoApp" ng-controller="DemoController"> <table> <thead> <tr> <td> <td>ID</td> <td>FirstName</td> <td>LastName</td> <td>Status</td> <td>Address</td> </tr> </thead> <tbody> <ttr ng-repeat = "Emp em pessoas"> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {emp.lastname}} </td> <t> {emp.p.p.st.st.st.st.st.st.st.st.st.st.st.st.st.st.st.st.st. <Td> {{Emp.address}} </td> </tr> </tbody> </itlast> <tm-pagination conf = "paginationconf"> </tm-pagination> </div> <script type = "text/javascript"> var App = angular.module ('DemoApp', [Type = "TEXT/JavScript"> var = angular.module ('DemoApp', [Type = "T. App.Controller ('Democontroller', ['$ scope', 'BusinessService', function ($ SCOPE, BUSINESSERVICE) {var getallemployee = function () {var postData = {PageIndex: $ scope.paginCinonf.currentPage, Pagesize: $ scope.paginingfiPinEf.PaginConf.CurrentPage, Pagesize: $ scope.pagin BusinessService.List (PostData) .Success (function (resposta) {$ scope.paginationConf.totalitems = Response.count; $ scope.persons = Response.items;}); /***************************************** $ scope. $ watch ('paginationconf.currentpage + paginationconf.itemsperpage', getAllEmployee); // Business Class App.Factory ('BusinessService', ['$ http', função ($ http) {var list = function (PostData) {return $ http.post ('/funcionário/getallemploy', postData);} {list: function}} {list);Plugins e downloads de demonstração
http://yunpan.cn/cqehnlrpnkniq senha de acesso be74
O exposto acima é a informação que o AngularJS implementa a função de paginação. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!