角度jsと角度-uiブートストラップを使用してサーバー側のページ付けを実装する方法をいくつか提案してください。私は、angualr-ui bootsrapページ区切りディレクティブで選択された現在のページに従って、ng-repeatを使用してテーブルリストをページ付けします。我々はサーバへの頻繁な呼び出しを避ける必要があるので。一度にサーバーから50アイテムを取得する必要があります。ページあたり10個のアイテムが表示されています。より大きなデータセットにページを分ける必要があるため、パフォーマンス上の理由からng-repeatモデルには常に50個のアイテムが含まれている必要があります。angle-uiブートストラップを使用してangularjsでサーバー側のページ付けを実装する方法。
2
A
答えて
6
DirPaginateは、このデモのために、このPlunkerを見てください、この質問
の要件を満たしていますものです。
サーバーサイドページネーションを使用する場合は、JSON応答をこの形式で取得する必要があります。あなたのJSON応答の
フォーマット
{
Count: 1400,
Items: [
{ // item 1... },
{ // item 2... },
{ // item 3... },
...
{ // item 25... }
]
}
あなたが見てする必要がある唯一の事はあなたが私たちのディレクティブにそれを渡すために、これを必要がありますので、あなたがあなたのデータベース内の項目の合計数を取得することです。
あなたの角度コントローラのフォーマット
.controller('UsersController', function($scope, $http) {
$scope.users = [];
$scope.totalUsers = 0;
$scope.usersPerPage = 25; // this should match however many results your API puts on one page
getResultsPage(1);
$scope.pagination = {
current: 1
};
$scope.pageChanged = function(newPage) {
getResultsPage(newPage);
};
function getResultsPage(pageNumber) {
// this is just an example, in reality this stuff should be in a service
$http.get('path/to/api/users?page=' + pageNumber)
.then(function(result) {
$scope.users = result.data.Items;
$scope.totalUsers = result.data.Count
});
}
})
、最終的にはこれはあなたのhtml
HTML
<div ng-controller="UsersController">
<table>
<tr dir-paginate="user in users | itemsPerPage: usersPerPage" total-items="totalUsers" current-page="pagination.current">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
</div>
参照してくださいにそれを統合します方法の例ですこのページの非同期データセクションでの作業。
0
私はDIR-ページネーションライブラリを使用。それは非常に使いやすく軽量です。 documentationも非常に良いです。
ここにはimplementationの例があります。
編集:おっと、気づいたRaman Sahasiは、彼の答えで同じ提案をしました。私を維持する、私はエンドツーエンドの実装のチュートリアルは、いくつかのために役立つと信じています。
関連する問題
- 1. Meteorで制限を適用してサーバー側のページ付けを実装する方法
- 2. angularjsのサーバー側のデータでページ番号を付けよう
- 3. angeljs $ resourceを使ってサーバー側のページ付けを行う方法は?
- 4. Tomcatサーバーを使用してサーバー側でC++コードを実行する方法は?
- 5. AngularJSを使用してサーバー側から配列を取得する方法は?
- 6. サーバー側でfirebaseクラウドメッセージングを実装する方法は?
- 7. ブートストラップ+ AngularJS - ソートする方法/検索/編集/ページ付け表の列
- 8. データテーブルにサーバー側の並べ替えを実装する方法
- 9. AngularJSのUI-GRIDにおけるサーバー側のページ設定
- 10. angularjsでナビゲーションバーを実装する方法
- 11. Nativescriptでスワイプジェスチャーを使用してページ間のナビゲーションを実装する方法
- 12. Pushnotificationサーバー側の実装
- 13. Facebook API:access_tokenサーバー側を取得してクライアント側で使用する方法
- 14. AJAXを使用してページ上でライブアップデートを実装する方法は?
- 15. vb/aspxシングルページモデル:フォームデータを別のページにポストしながらサーバー側のキャプチャを実装する方法は?
- 16. コードハイライトをブートストラップの例として実装する方法
- 17. CORS Javaサーバー側実装
- 18. ブートストラップ付きdatepickerを実装する
- 19. angularjsを使用してDominoサーバーにログインする方法は?
- 20. ブートストラップを使ってページ番号をつける方法
- 21. AngularJS RouteProviderを使用してページをキャッシュする方法は?
- 22. angularJSを使用してhtmlページを起動する方法
- 23. awkコマンドで色付けを実装してメールで送信する方法は?
- 24. 2-leggedサーバー側でnode.jsのoauth実装
- 25. ヒント/ Pugでブートストラップを使用してデータテーブルを実装
- 26. PHPとMYSQLを使用してページ分割を実装する方法
- 27. $ httpを使用してangularjsページ分割する方法
- 28. MVC 3:サーバー側で自動実装された日付のVERYカスタムフォーマットを使用する
- 29. サーバー/クライアント側でコールバックパラメータを使用するjavascript関数の実行方法は?
- 30. Apacheサーバー上の.htaccessを使用してキャッシュコントロールを実装する