您的位置：首页 > Web前端 > JavaScript

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

2015-12-08 16:47 579 查看 
<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"
}
]

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航