English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Angularjsでページング機能を実現および実例コード

Angularjsでページングを実現

前書き

       言語を学ぶ前に必ず業務要件が存在して、その言語を学ぶ動機を提供するのが普通です。もちろんngも同様で、ngを学ぶ前に最初に考えたデモは、ngでページングを実現することでした。基本的な計算方法以外には、インストラクションをプラグインに封装して、ページングが必要なリストページ内で直接参照することです。

プラグイン

      ページングプラグインを封装する際には、いくつかの方法を実装しましたが、総じて非常に散らばっていました。最終的には、ある友人(http:)に助けられました。//www.miaoyueyue.com/archives/813HTML(.html)に封装されたプラグインで、とても良いと感じました。そのソースコードを読んで、プロジェクトに直接使用しました。

原理と使用説明

      1プラグインのソースコードは、主にangular directiveに基づいて実現されています。

      2呼び出し時の重要なポイントは、バックエンドのリクエスト処理関数であり、バックエンドからデータを取得することです。

      3プラグインには2つの重要なパラメータがあります。currentPageとitemsPerPageで、現在のページ番号とページごとのレコード数です。

      4実行方法を呼び出した後、ページングプラグインのページ番号をクリックするたびにバックエンドに再提出して対応するページ番号のデータを取得する必要があります。呼び出されるページ番号を監視するために$watchを使用しています。最初に使用したときは、プラグインのonchangeに呼び出し関数を配置していましたが、バックエンドが2回トリガーされることが判明しました。このポイントには注意が必要です。

      5、私はバックエンドのリクエストをServiceレイヤーにラップして、Controllerで呼び出し、MVCの考え方にも従っています。

画像


 

呼び出しコード

<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
  };
  /***************************************************************
  ページ番号とページの記録数が変更された場合のバックエンドクエリの監視
  currentPageとitemsPerPageを別々に監視すると、バックエンドイベントが2回トリガーされます。
  ***************************************************************/
  $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
 });
 //業務クラス
 app.factory('BusinessService', ['$http', function ($http) {
  var list = function (postData) {
   return $http.post('/Employee/GetAllEmployee', postData);
  });
  return {
   list: function (postData) {
    return list(postData);
   });
  });
 });
</script>

 プラグインとDemoのダウンロード

http://yunpan.cn/cQEhnLrpnkniQ アクセスパスワード be74

これでAngularJSでページネーション機能を実現するための情報整理が完了しました。今後も関連する情報を追加していく予定です。皆様の本サイトへのサポートに感謝します!

声明:本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権に抵触する内容が見つかった場合は、以下のメールアドレスまでご連絡ください:notice#oldtoolbag.com(メールを送信する際、#を@に変更してください。)を通じて報告し、関連する証拠を提供してください。一旦確認がついたら、本サイトは即座に侵害される内容を削除します。

おすすめ