详解angularjs结合pagination插件实现分页功能

angularjs与pagination插件可以完美实现前端的分页，筛选，搜索等功能，前提当然需要有后台开发配合，今天我们只说前端实现：
1、引入pagination插件，在angularjs引入之前先加载pagination插件；

2、在定义controller的时候，需要注入pagination插件；
3、分页前端原理基本需要有个默认异步请求，当点击分页，再次请求数据并向后台发送当前页码，如果有搜索数据或者筛选数据功能，在发送请求的同时需要带上与后台开发共同定义的搜索参数；
4、废话不多上，上代码，基本模板：

var url = "请求路径";$http（{method:"post",url:url}）.success（function（_data） {$scope.contentlist = _.data.items;//数据列表$scope.pageparameters = _data.data;$scope.Searchparameters = {//定义你的搜索参数}// 初始化分页数据var pagination;$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）） {var page = 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方法在此略过，不明白的小伙伴可以私信！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。