angular表格带筛选分页，本地json

来源：互联网发布：类似商务通的软件编辑：程序博客网时间：2024/05/17 07:11

<body ng-app="formTest" ><div class="container"><div class="add" ng-controller="formCtrl"><h1>list</h1><table border="1" cellspacing="0px" width="100%" ><thead><tr><th width="35%">name</th><th width="35%"><select ng-model="data1.City" class="select"><option value="">city</option><option value="Bergamo">Bergamo</option><option value="London">London</option></select></th><th width="25%"><select ng-model="data1.Country" class="select"><option value="">country</option><option value="Canada">Canada</option><option value="Italy">Italy</option></select></th></tr></thead><tbody><tr  ng-repeat="student in (stu=(students|filter:data1|orderBy:'Name')).slice((currentNum - 1) * pageSize, currentNum * pageSize)" ><td >{{student.Name}}</td><td>{{student.City}}</td><td>{{student.Country}}</td></tr></tbody><tfoot><tr><td colspan="3"><div class="turnPageButtonArea" >    <button ng-click="previous()">Previous</button>    <button ng-click="next()">Next</button>    <input type="number" ng-model="toPage" class="pageNum" placeholder="{{currentNumber}}">    <button ng-click="goToPage()">Go</button>    <span class="totalPages" >共  {{(stu.length/pageSize)|ceil}}页</span></div></td></tr></tfoot></table></div></div></body>

script

var app = angular.module('formTest', []);app.factory('pageService',[function page(){return{setPage:function(data, currentPage, pageSize){ var pagedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);        return pagedData;}}}]);app.filter('ceil', function() { return function(input) { return Math.ceil(input); };});app.controller('formCtrl', ['$rootScope','$scope','$http','$filter','pageService',function($rootScope,$scope,$http,$filter,pageService) {var url="stu.json";$scope.pageSize=4;$http.get(url).success( function(response) {$rootScope.students = response;$scope.currentNum=1;$scope.currentNumber=$scope.currentNum;   });      $scope.previous=function(){   //console.log($scope.stu.length);   if($scope.currentNum>1){   $scope.currentNum-=1;   $scope.currentNumber=$scope.currentNum;   }   else{alert("第一页")};   }   $scope.next=function (){   //max=$scope.stu.length;   max=Math.ceil($scope.stu.length/$scope.pageSize);   if($scope.currentNum<max){   $scope.currentNum+=1;   $scope.currentNumber=$scope.currentNum;   }   else{alert("最后一页")};   }   $scope.goToPage=function(){   var num=$scope.toPage;   max=Math.ceil($scope.stu.length/$scope.pageSize);   if(num>=1&&num<=max){   $scope.currentNum=num;   $scope.toPage="";   $scope.currentNumber=$scope.currentNum;   }   else{   alert("请重新输入");   }   }}]);

json

[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"}]

0 0