angualrjs前端使用分頁功能
阿新 • • 發佈:2019-02-09
首先引入js和css:
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<script src="../plugins/angularjs/pagination.js" type="text/javascript"></script>
核心程式碼:
<script type="text/javascript">
var myapp = angular.module("pinyougou",['pagination']); //在pinyougou模組中引入pagination模組myapp.controller("brandController",["$scope", "$http",function($scope, $http){
$scope.findAll = function(){
$http.get("../brand/findAll.do").success(
function(response){
$scope.list = response;
}
);
}
/* $scope.findAll(); */
$scope.paginationConf = {
currentPage: 1, //當前頁碼
totalItems: 10, //總條目數
itemsPerPage: 10, //每頁有多少條目
perPageOptions: [10, 20, 30, 40, 50], //可供選擇的條目
onChange: function(){ //當頁面變化的時候執行的函式
$scope.
}
};
$scope.reloadPage = function(){
$scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
$scope.findPage = function(page, size){
$http.get('../brand/findPage.do?page=' + page + '&size=' + size).success(
function(response){
$scope.list = response.rows;
$scope.paginationConf.totalItems = response.total;//更新總記錄數
}
);
}
}]);
</script>
在table的下面寫:
<tm-pagination conf="paginationConf"></tm-pagination>