實例詳解Angular Js分頁顯示數據
在做專案的時候我們常常會用到分頁顯示數據，其實原理很簡單：就是每次點擊（下/上）一頁的時候向後台發送請求獲取相關JSON數據，我這裡演示的是我每次請求都會傳給後台兩個參數（pageSize–每頁要展示的資料、pageNo–目前頁碼）
HTML相關程式碼：
<p id='demo' ng-app='myApp' ng-controller='myCtrl'>
<table>
<thead>
<th>序号</th>
<th>操作人</th>
<th>类别</th>
<th>电话</th>
<th>金额</th>
<th>操作时间</th>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{$index+1}}</td>
<td>{{item.operator}}</td>
<td>{{item.type}}</td>
<td>{{item.tell}}</td>
<td>{{item.price}}</td>
<td>{{item.operateTime}}</td>
</tr>
</tbody>
</table>
<p class="page">
<span class="nextPage" ng-click="nextPage()">下一页</span>
<span class="prevPage" ng-click="lastPage()">上一页</span>
<span>{{cur}}/{{totalPage}} 页 共 {{totalNum}} 条记录</span>
</p>
</p>CSS程式碼就不貼上來了，大家自行補充；
JS代碼：
var params={
pageSize:10,
pageNo:1
}；var curPage=1;var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
init($scope,$http);
})function search($http,$scope){
params.pageNo=pageNo; $http({
method: 'GET',
url:后台接口地址,
params:params
}).then(function successCallback(response) {
// 数据总条数
$scope.totalNum = response.data.totalNum; // 数据总页数
$scope.totalPage = response.data.totalPage; // 数据当前页
$scope.cur = curPage; // 列表详细数据
var content = response.data.contents; for(var i in content){ // 数据操作人
content[i].operator= content[i].operator; // 数据电话
content[i].tell= content[i].tell; // 数据类别
content[i].type = content[i].type; // 数据操作时间
content[i].operateTime = content[i].createTime; // 数据价格
content[i].price = content[i].price;
} $scope.items = content;
}, function errorCallback(response) {
// 请求失败执行代码
if(response!=null)
error(response)
});
}function init($scope,$http){
search($http,$scope); $scope.nextPage=function(){
nextPage($http,$scope);
}; $scope.lastPage=function(){
lastPage($http,$scope);
};
}// 点击上一页function lastPage($http,$scope){
if(curPage>1){
curPage--;
search($http,$scope);
}
}// 点击下一页function nextPage($http,$scope){
if(curPage<totalPage){
curPage++;
search($http,$scope);
}
}
**注意**1、如果在你的项目里有根据数据前面的序号来删除某条数据，建议看下这篇博文[Angular Js中$index的小心使用](http://blog.csdn.net/renfufei/article/details/43061877)2、如果你的项目后台传过来的数据没有经过处理是全部的数据可以参考这篇博文[Angular Js表格分页](http://www.cnblogs.com/smilecoder/p/6519833.html)
在做專案的時候我們經常會用到分頁顯示數據，但其實原理很簡單：就是每次點擊（下/上）一頁的時候向後台發送請求獲取相關JSON數據，我這裡演示的是我每次請求都會傳給後台兩個參數（pageSize–每頁要展示的數據、pageNo–當前頁碼），這文章分享相關內容；
HTML相關程式碼：
<p id='demo' ng-app='myApp' ng-controller='myCtrl'>
<table>
<thead>
<th>序号</th>
<th>操作人</th>
<th>类别</th>
<th>电话</th>
<th>金额</th>
<th>操作时间</th>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{$index+1}}</td>
<td>{{item.operator}}</td>
<td>{{item.type}}</td>
<td>{{item.tell}}</td>
<td>{{item.price}}</td>
<td>{{item.operateTime}}</td>
</tr>
</tbody>
</table>
<p class="page">
<span class="nextPage" ng-click="nextPage()">下一页</span>
<span class="prevPage" ng-click="lastPage()">上一页</span>
<span>{{cur}}/{{totalPage}} 页 共 {{totalNum}} 条记录</span>
</p>
</p>CSS 程式碼就不貼上來了，大家自行補充；
JS程式碼：
var params={
pageSize:10,
pageNo:1
}；var curPage=1;var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
init($scope,$http);
})function search($http,$scope){
params.pageNo=pageNo; $http({
method: 'GET',
url:后台接口地址,
params:params
}).then(function successCallback(response) {
// 数据总条数
$scope.totalNum = response.data.totalNum; // 数据总页数
$scope.totalPage = response.data.totalPage; // 数据当前页
$scope.cur = curPage; // 列表详细数据
var content = response.data.contents; for(var i in content){ // 数据操作人
content[i].operator= content[i].operator; // 数据电话
content[i].tell= content[i].tell; // 数据类别
content[i].type = content[i].type; // 数据操作时间
content[i].operateTime = content[i].createTime; // 数据价格
content[i].price = content[i].price;
} $scope.items = content;
}, function errorCallback(response) {
// 请求失败执行代码
if(response!=null)
error(response)
});
}function init($scope,$http){
search($http,$scope); $scope.nextPage=function(){
nextPage($http,$scope);
}; $scope.lastPage=function(){
lastPage($http,$scope);
};
}// 点击上一页function lastPage($http,$scope){
if(curPage>1){
curPage--;
search($http,$scope);
}
}// 点击下一页function nextPage($http,$scope){
if(curPage<totalPage){
curPage++;
search($http,$scope);
}
}
**注意**1、如果在你的项目里有根据数据前面的序号来删除某条数据，建议看下这篇博文[Angular Js中$index的小心使用](http://blog.csdn.net/renfufei/article/details/43061877)2、如果你的项目后台传过来的数据没有经过处理是全部的数据可以参考这篇博文[Angular Js表格分页](http://www.cnblogs.com/smilecoder/p/6519833.html)相關推薦：
PHP實例程式碼：AJAX 分頁顯示資料_PHP教學
#jQuery+Ajax+PHP+Mysql實作分頁顯示資料實例講解_jquery
以上是實例詳解Angular Js分頁顯示數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在Ubuntu 24.04上安裝Angular
Mar 23, 2024 pm 12:20 PM
Angular.js是一種可自由存取的JavaScript平台，用於建立動態應用程式。它允許您透過擴展HTML的語法作為模板語言，以快速、清晰地表示應用程式的各個方面。 Angular.js提供了一系列工具，可協助您編寫、更新和測試程式碼。此外，它還提供了許多功能，如路由和表單管理。本指南將討論在Ubuntu24上安裝Angular的方法。首先，您需要安裝Node.js。 Node.js是一個基於ChromeV8引擎的JavaScript運行環境，可讓您在伺服器端執行JavaScript程式碼。要在Ub
Win11管理員權限取得詳解
Mar 08, 2024 pm 03:06 PM
Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限
Oracle SQL中的除法運算詳解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算
Angular元件及其顯示屬性：了解非block預設值
Mar 15, 2024 pm 04:51 PM
Angular框架中元件的預設顯示行為不是區塊級元素。這種設計選擇促進了元件樣式的封裝，並鼓勵開發人員有意識地定義每個元件的顯示方式。透過明確設定CSS屬性 display，Angular組件的顯示可以完全控制，從而實現所需的佈局和響應能力。
PHP模運算子的作用及用法詳解
Mar 19, 2024 pm 04:33 PM
PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模
linux系統呼叫system()函數詳解
Feb 22, 2024 pm 08:21 PM
Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統
Linux的curl指令詳解
Feb 21, 2024 pm 10:33 PM
Linux的curl命令詳解摘要：curl是一種強大的命令列工具，用於與伺服器進行資料通訊。本文將介紹curl指令的基本用法，並提供實際的程式碼範例，幫助讀者更好地理解和應用該指令。一、curl是什麼？ curl是命令列工具，用於發送和接收各種網路請求。它支援多種協議，如HTTP、FTP、TELNET等，並提供了豐富的功能，如檔案上傳、檔案下載、資料傳輸、代
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
