Implementazione della funzione di paginazione Angularjs e codice di esempio

Implementazione della paginazione basata su Angularjs

Introduzione

　　　　　　 Prima di imparare qualsiasi linguaggio, ci sono esigenze di business che ti spingono a impararlo, ovviamente ng non fa eccezione. Prima di imparare ng, il mio primo demo che volevo fare era una pagina di paginazione basata su ng, oltre al calcolo di base, ho encapsulato l'istruzione in un directive per essere direttamente utilizzato nella pagina della lista che richiede paginazione.

Plugin

　　　　　 Quando ho implementato il plugin di paginazione, ho realizzato diversi modi, che sono stati in generale piuttosto dispersi. Alla fine, ho trovato un plugin encapsulato da un amico (http://www.miaoyueyue.com/archives/813.html) che mi sembrava buono, ho letto il suo codice sorgente e l'ho usato direttamente nel mio progetto.

Principio e descrizione dell'uso

　　　　　 1、Il codice sorgente del plugin è principalmente basato su angular directive.

　　　　　 2、Il punto chiave nella chiamata è la funzione di elaborazione della richiesta del backend, ossia ottenere i dati dal backend.

　　　　　 3、I due parametri chiave del plugin sono currentPage e itemsPerPage, che rappresentano il numero di pagina corrente e il numero di record per pagina.

　　　　　 4、Dopo aver implementato il metodo, dobbiamo inviare di nuovo la richiesta al backend ogni volta che clicchiamo sul pulsante di pagina del plugin per ottenere i dati della pagina corrente. Ho usato $watch per monitorare il pulsante di pagina. La prima volta che l'ho usato, ho messo la chiamata della funzione nell'evento onchange del plugin, ma ho scoperto che viene chiamato due volte il backend. Questo è un punto da notare.

　　　　　 5、Ho encapsulato la richiesta del backend in una layer di Service, poi l'ho chiamata nel Controller, che è anche conforme all'idea di MVC.

Effetto visivo

　

Codice di chiamata

<div ng-app="DemoApp" ng-controller="DemoController">
 <table class="table table-striped">
  <thead>
   <tr>
    <td>ID</td>
    <td>FirstName</td>
    <td>LastName</td>
    <td>Status</td>
    <td>Address</td>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="emp in persons">
    <td>{{emp.ID}}</td>
    <td>{{emp.FirstName}}</td>
    <td>{{emp.LastName}}</td>
    <td>{{emp.Status}}</td>
    <td>{{emp.Address}}</td>
   </tr>
  </tbody>
 </table>
 <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
 var app = angular.module('DemoApp', ['tm.pagination']);
 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;
   });
  }
  //配置分页基本参数
  $scope.paginationConf = {
   currentPage: 1,
   itemsPerPage: 5
  };
  /***************************************************************
  Monitorare l'evento di ricerca backend quando la pagina e il numero di record della pagina cambiano
  Se si monitorano separatamente currentPage e itemsPerPage, verranno attivati due eventi backend.
  ***************************************************************/
  $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
 });
 //Classe di business
 app.factory('BusinessService', ['$http', function ($http) {
  var list = function (postData) {
   return $http.post('/Employee/GetAllEmployee', postData);
  }
  return {
   list: function (postData) {
    return list(postData);
   }
  }
 });
</script>

　Download di plugin e Demo

http://yunpan.cn/cQEhnLrpnkniQ　Password di accesso be74

Ecco la raccolta di materiali per implementare la funzione di paginazione di AngularJS, continueremo a integrare ulteriori materiali pertinenti, grazie per il supporto della nostra community!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.