プロジェクトの多くのページでは、ページネーションが使用され、各ページには多くの重複したページネーションコードがあります。そこで、ページコードを簡素化し、メンテナンスを簡単にするための簡単なページネーション命令を書きました。私はブログでそれを将来簡単にアクセスできるようにバックアップとして書きました。
指令とそのアプリケーションを定義するための手順は次のとおりです。
1。ディレクティブ定義
JSファイル、Page-Directive.jsを定義します。これは、ページング命令コードの作成に使用されます。このファイルには、ページングテンプレートが含まれています。以下は、JSファイルのすべてのコードです。
'Strict'を使用;（function（）{angular.module（ 'template/pageinit/pageinit.html'、[]）。run（['$ templatecache'、function（$ templatecache）{$ templatecache.put（ 'template/pageinit/pageinit.html'、 ng-class = "{disabled：pagedata.currentpage == 1}">/n '+' <a href = "javascript：void（0）;" on_loadPage（1） " '<a href = "javascript：void（0）;" ng-click = "on_prev（）"> <span> </span> </a>/n'+ '</li>/n'+ '<li ng-repeat = "pagedata.pages" ng-class = " page == pagedata.totalpage} ">/n '+' <a ng-if =" page！=/'.../' "href =" javascript：void（ng-class = "{/'bg-custom/'：page == pagedata.currentpage} }} </a>/n '+' <a ng-if = "page ==/'.../'" href = "javascript：void（0）;" {/'bg-custom/'：page == pagedata.currentpage} ng-class = "{disabled：pagedata.currentpage == pagedata.totalpage}">/n '+' <a href = "javascript：void（0）;" PlaceHolder = "" ng-model = "inpage">/n '+' <input type = "button" value = "jump" ng-click = "on_loadpage（inpage）"> </div>/n '+' </li>/n '+' <li> <a href = "＃"> <スパン> {pagedata.count}} </span> </a> n '+' </ul>/n '+'）;制限： 'ae'、templateurl：function（telement、tattrs）{tattrs.templateurl || gageinittemplate.getPath（）、true、scope： '='、prev： '＆'、next： '＆'、scope： function（scope.prev）{scope.onext = function {scope.next）{scope.next（）};ページ}）; TemplatePath;2。ページネーションスタイルコントロール
別の.cssファイルに記述することをお勧めします。まず、新しいpagesync.cssファイルを作成します。以下は特定のスタイルです。
.pagination-main {display：inline-block;パディング左：0;マージン：0 0;ボーダーラジウス：4px; Vertical-align：Middle;}。pagination-main li.prev-page> a {border：0;}。pagination-main li.next-page> a {border：0;国境左：1px;マージン左：0;}。ページネーションメインli.first-page> a {border-top-left-radius：0; Border-Bottom-Left-Radius：0;}。Pagination-Main Li.last-Page> a {Border-Top-Right-Radius：0; Border-Bottom-Right-Radius：0;}。Pagination-Main Li Div {width：80px; border：1px solid #ddddddd; background-color：#ffffff; float：left; padding：0;}。 center;}。pagination-main li.skip-page input [type = 'button'] {padding：0 4px 1px 10px; border：0; border-left：1px solid #dddddd; background-color：#ffffff} .pagination-mainli.data-num> a {border：0;マージン左：0;}。ページネーション - メイン> li {display：inline;}。ページネーション - メイン> li：first-child> a、.pagination-main> li：first-child> span { /*margin-left：0; Border-Top-Left-Radius：4px; Border-bottom-left-radius：.active> a、.pagination-main> .active> span、.pagination-main> .active> a：hover、.pagination-main> .active> span：hover、.pagination-main> .active> a：focus、.pagination-main> .active> .active> a：focus、.paginative main色：#fff;カーソル：デフォルト;バックグラウンドカラー：＃428BCA;境界線：＃428bca;}。pagination-main> li> a、.pagination-main> li> span {position：relative;フロート：左; /*ページネーション：6px 12px;*/ padding：1px 8px;マージン左：-1px;ラインハイト：1.42857143;色：＃428BCA;テキスト装置：なし;バックグラウンドカラー：#fff;ボーダー：1px Solid #DDD;}。パジネーションメイン> .disabled>スパン：ホバー、.pagination-main> .disabled> span：Hover、.pagination-main> .disabled> span：focus、.pagination-main> .disabled> a、.pagination-main> .disabled>カーソル：禁止されていません。バックグラウンドカラー：#fff;境界線：#ddd;}3。ページネーションクエリメソッド
工場でページネーションクエリの方法をカスタマイズしました。これは共有され、コードメンテナンスに便利です。 Angularのバックグラウンドとの相互作用は、デフォルトでは非同期です。ここで同期クエリとして書きました。まず、JSファイルPagesync.service.jsを定義します。以下は、工場の全コンテンツです。
'Strict'; angular.module（ 'app'）。ファクトリー（ 'pagesync'、['$ http'、 '$ q'、function page（$ http、$ q）{var totalpage = 1; var pages = []; var endpage = 1; var load = 1; {RowCollectionPage：[]、TotalPage：1、CurrentPage：1、Pages：[]}; TotalPage <= 7） json.count.count.pagesize = pagesized。 *（データを返す前に）録音された時期になります。 I <TotalPage+1） （TotalPage -CurrentPage）{Temp = [TotalPage -5、TotalPage -3、TotalPage -1、TotalPage]}プロジェクトのテーブルの高さは、ブラウザウィンドウの高さに基づいて計算され、ダイナミック//ページはテーブルの下部に固定されているため、var setpagerow = function（rowarr、pagesize）{var temp = []; Temp.push（var j = 0; j <rowarr.push）{{}）} var defer（） ' + Pagesize; Pagesize、var deferred = $ q.defer（）;4.コマンドを使用します
1）。ページ上のコード：
私のコードでは、ページはテーブルのTfootに記述されています。 prev（）、next（）、およびloadpage（page）はすべて、ページの対応するコントローラーで定義されています。
<表> <thead> <tr> <th>シリアル番号</th> <th>列名1 </th> <th>列名2 </th> <th </th> </tr> </thead> <tbody> <tr ng-if = "！ $ index+1+（pagedata.currentPage-1）*Pagesize： ''}} </td> <td> {{row.args1}} </td> <td> {{row.args2}} </td> <td> {{row.args2}} </td> <td> <td> < center; "> <a href = '＃'>変更</a> </td> </tr> <tr ng-if =" notabledata "ng-repeat =" pagedata.rowcollectionpage "> <td ng-if =" $ index == 0 "colspan =" 4 "style =" center： "> no！ </td> <td ng-if = "$ index！= 0" colspan = "4"> </td> </tr> </tbody> <tfoot> <tr> <td style = "text-align：center;" colspan = "6"> <div> <page-init page-data = "pagedata" prev = "prev（）" next = "next（）" load-page（page） "> </page-init> </div> </td> </td> </tr> </tfoot> </table>2）。コントローラーのコード
まず、次のように、コントローラー内の工場と参照Pagesyncを参照する必要があります。
angular.module（ 'app'）。コントローラー（ 'myctrl'、function（pagesync）{}）;
ページネーションクエリの前に、準備をする必要があります。
// Pagedataは、ページデータセット、ページの総数、ページ番号セット、およびデータの総数を設定します。 LoadTimeは、時間ステータスを記録するカスタムパラメーターです（データにアクセスする前とデータを返した後）
$ scope.pagedata = {rowcollectionPage：[]、totalpage：1、currentPage：1、pages：[]、count：0、loadtime： 'before'};
//これは、実際の状況に応じて、テーブルの高さを計算するために使用されます。
$ scope.tabheight = $ scope.height-48-37-10-42-5;
//実際にページ上にデータの行がいくつあるかを計算します
$ scope.pagesize = parseint（（$ scope.tabheight-15-34-34-39）/34）;
次に、コントローラーに次の方法を書きます
//ページネーションクエリ$ scope.load = function（row）{$ scope.surgeonpagedata.rowcollectionpage = common.setpagerow（[]、$ scope.pagesize）; $ scope.nosurgeondata = false; $ scope.surgeonpagedata.loadtime = 'before'; pagesync.load（url、$ scope.pagedata.currentpage、$ scope.pagesize）。（function（data）{$ scope.pagedata = data; if（（$ scope.pagedata.loadtime == '後） $ scope.notabledata = true; $ scope.pagedata = data; }}; //前のページ$ scope.prev = function（）{if（$ scope.pagedata.currentpage> 1）{pagesync.prev（url、$ scope.pagedata.currentpage、$ scope.pagesize）.then（function（data）{$ scope.pagedata = pageata = data;}; }}; //ページ番号をクリックして$ scope.loadpage = function（page）{$ scope.inpage = undefined; var intpage; if（typeof page == 'string'）{if（page！= ""）{intpage = parseint（page、10）; } else {intpage = 0; }} else {intpage = page; } if（$ scope.pagedata.totalpage <= 1）{} else if（intpage == undefined || intpage == null）{alert（ 'ジャンプページ番号に記入してください！'）; } else if（intpage <= 0 || intpage> $ scope.pagedata.totalpage）{alert（ 'ジャンプページ番号は0未満で、ページの総数'+$ scope.pagedata.totalpage）; } else if（$ scope.pagedata.currentpage！= page）{pagesync.loadpage（url、$ scope.pagedata.currentpage、$ scope.pagesize、page）.then（function（data）{$ scope.pagedata = data;}）; }};5。結果
最終的な実装効果は次のとおりです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。