今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心和感到不舒服的事情。
于是在网上也找到了靠谱的解决方案: ,且在此维护者的这个版本中解决了此问题,同时注意 angularjs版本的配合使用。但是不满足于现状,我还是找到了自己的解决方案,不打针不吃药,就这么简单!粗暴!It's time to show the code!!
1 var app = angular.module("shopping", [ 'pagination' ]); 2 app.controller("brandController", 3 function($scope, $http) { 4 $scope.reloadList = function() { 5 //切换页码 6 $scope.findPage($scope.paginationConf.currentPage, 7 $scope.paginationConf.itemsPerPage); 8 } 9 $scope.reload = true; 10 //分页控件配置 11 $scope.paginationConf = { 12 currentPage : 1, 13 totalItems : 10, 14 itemsPerPage : 10, 15 perPageOptions : [ 10, 20, 30, 40, 50 ], 16 onChange : function() { 17 if(!$scope.reload) { 18 return; 19 } 20 $scope.reloadList();//重新加载 这个方法会重复调用两次 21 $scope.reload = false; 22 setTimeout(function() { 23 $scope.reload = true; 24 }, 200); 25 } 26 }; 27 //分页 28 $scope.findPage = function(page, rows) { 29 30 $http.get( 31 '../goods/findAll?pageNum=' + page + '&pageSize=' 32 + rows).success(function(response) { 33 $scope.list = response.rows; 34 $scope.paginationConf.totalItems = response.total; //更新总记录数 35 }); 36 } 37 38 });