详解angularjs结合pagination插件实现分页功能
angularjs与pagination插件可以完美实现前端的分页,筛选,搜索等功能,前提当然需要有后台开发配合,今天我们只说前端实现:
1、引入pagination插件,在angularjs引入之前先加载pagination插件;
2、在定义controller的时候,需要注入pagination插件;
3、分页前端原理基本需要有个默认异步请求,当点击分页,再次请求数据并向后台发送当前页码,如果有搜索数据或者筛选数据功能,在发送请求的同时需要带上与后台开发共同定义的搜索参数;
4、废话不多上,上代码,基本模板:
varurl='请求路径'; $http({ method:"post", url:url }).success(function(_data){ $scope.contentlist=_.data.items;//数据列表 $scope.pageparameters=_data.data; $scope.Searchparameters={ //定义你的搜索参数 } //初始化分页数据 varpagination; $scope.paginationInt=function($data){ pagination=$scope.pagination=Pagination.create({ itemsCount:$data.total_items,//总数 itemsPerPage:$data.epage,//每页条数 currentPage:$data.page//当前页码 }); //分页操作 pagination.onChange=function(page){ $scope.page(page); }; }; $scope.paginationInt($scope.pageparameters); //筛选过滤列表页时传递的参数 $scope.borrowSearch=function(type,val){ $scope.borrowData[type]=val; $scope.page(1);//每次搜索都从第一页开始 }; //排序 $scope.SearchTab={}; $scope.SearchStatus=true; $scope.current={ //你的参数 }; //页码跳转操作 $scope.skipInput=function(page,endPage){ if(!isNaN(page)){ varpage=parseInt(page,20), endPage=parseInt(endPage,20); if(page>endPage||page<=0){ $scope.skipError=true; }else{ $scope.skipError=false; } }else{ $scope.skipError=true; } }; $scope.page=function(page){ $scope.Searchparameters.current_page=page; //分页方法 $http({url:url,method:"post",params:$scope.Searchparameters}).success(function(data){$scope.contentlist=data.items;});};});
HTML方法在此略过,不明白的小伙伴可以私信!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。