Implémentation de pagination basée sur AngularJS
Préface
Avant d'apprendre une langue, il doit y avoir des besoins commerciaux pour vous conduire pour l'apprendre. Bien sûr, NG ne fait pas exception. Avant d'apprendre NG, la première démo que je voulais faire était de mettre en œuvre la pagination basée sur NG. En plus de l'idée informatique de base, il s'agit d'utiliser des instructions pour le encapsuler dans un plug-in et de le référencer directement dans la page de liste qui nécessite une pagination.
Plugin
Lorsque je résume le plugin de pagination, j'ai implémenté plusieurs méthodes en général, et j'ai finalement trouvé un plug-in encapsulé par un ami (http://www.miaoyueyue.com/archives/813.html). Je sentais que c'était assez bon, alors j'ai lu son code source et je l'ai utilisé directement dans le projet.
Principes et instructions pour une utilisation
1. Le code source du plug-in est principalement implémenté en fonction de la directive angulaire.
2. Le point clé lorsque l'appel est la fonction de traitement de la demande d'arrière-plan, c'est-à-dire pour récupérer les données de l'arrière-plan.
3. Le plug-in a deux paramètres clés: CurrentPage, ItemsPerpage, le numéro de page actuel et le nombre d'enregistrements par page.
4. Après implémentation de l'appel de la méthode, nous devons soumettre à nouveau l'arrière-plan pour obtenir les données de numéro de page correspondantes en fonction de chaque clic sur le numéro de page du plug-in Paging. Dans le numéro de page de l'appel, j'ai utilisé $ watch pour surveiller. Lorsque je l'ai utilisé pour la première fois, j'ai mis la fonction d'appel dans l'echange du plug-in, mais j'ai trouvé que l'arrière-plan sera déclenché deux fois à chaque fois. Cet endroit a besoin d'attention.
5. Je résume l'arrière-plan de la demande dans une couche de service, puis je l'appelle dans le contrôleur, qui est également conforme à l'idée MVC.
Diagramme de reproduction
Code d'appel
<div ng-app = "DemoApp" ng-Controller = "DemoController"> <s table> <thead> <tr> <td> <td> id </td> <td> status </td> <td> Adresse </td> </tr> </ thead> <tbody> <td> </td> </tr> ng-repeat = "Emp in Persons"> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}} </d> <td> {{emp.Status}} </td> <Td> {{emp.address}} </td> </tr> </tbody> </pall App.Controller ('DemoController', ['$ Scope', 'BusinessService', Function ($ Scope, BusinessService) {var GetAlLemployee = Function () {var PostData = {PageIndex: $ Scope.PaginationConf.CurrentPage, PageSize: $ Scope.paginationConf.Itemsperpage} BusinessService.List (PostData) .Success (Function (Response) {$ Scope.PaginationConf.Totalitems = Response.Count; $ Scope.Persons = Response.Items;}); / ********************************************************************************************S lorsque les numéros de page et les enregistrements de page changent, surveillant la requête de fond. $ scope. $ watch ('paginationconf.currentPage + paginationconf.itemsperpage', getAlLemployee);}]); // Business Class app.factory ('BusinessService', ['$ http', function ($ http) {var list = function (postdata) {return $ http.post ('/ employee / getallemployee', postdata);} return {list: function (postdata) {return list (postdata);}}});Plugins et téléchargements de démonstration
http://yunpan.cn/cqehnlrpnkniq mot de passe d'accès be74
Ce qui précède est l'information selon laquelle AngularJS implémente la fonction de pagination. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien pour ce site Web!