最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

如何解决angular分页插件tm.pagination二次触发的问题

来源:动视网 责编:小采 时间:2020-11-27 19:33:38
文档

如何解决angular分页插件tm.pagination二次触发的问题

如何解决angular分页插件tm.pagination二次触发的问题:这篇文章主要介绍了关于如何解决angular分页插件tm.pagination二次触发的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按
推荐度:
导读如何解决angular分页插件tm.pagination二次触发的问题:这篇文章主要介绍了关于如何解决angular分页插件tm.pagination二次触发的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按


这篇文章主要介绍了关于如何解决angular分页插件tm.pagination二次触发的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心和感到不舒服的事情。

于是在网上也找到了靠谱的解决方案:http://jqvue.com/tm.pagination/ ,且在此维护者的这个版本中解决了此问题,同时注意 angularjs版本的配合使用。但是不满足于现状,我还是找到了自己的解决方案,不打针不吃药,就这么简单!粗暴!It's time to show the code!!

var app = angular.module("shopping", [ 'pagination' ]);
 app.controller("brandController",
 function($scope, $http) {
 $scope.reloadList = function() {
 //切换页码 
 $scope.findPage($scope.paginationConf.currentPage,
 $scope.paginationConf.itemsPerPage);
 }
 $scope.reload = true;
 //分页控件配置 
 $scope.paginationConf = {
 currentPage : 1,
 totalItems : 10,
 itemsPerPage : 10,
 perPageOptions : [ 10, 20, 30, 40, 50 ],
 onChange : function() {
 if(!$scope.reload) {
 return;
 }
 $scope.reloadList();//重新加载 这个方法会重复调用两次
 $scope.reload = false;
 setTimeout(function() {
 $scope.reload = true;
 }, 200);
 }
 };
 //分页
 $scope.findPage = function(page, rows) {
 
 $http.get(
 '../goods/findAll?pageNum=' + page + '&pageSize='
 + rows).success(function(response) {
 $scope.list = response.rows;
 $scope.paginationConf.totalItems = response.total;  //更新总记录数
 });
 }
 });

核心代码我已经用黑色字体加粗标识出来了,定义一个全局变量reload存于$scope上,第二次触发加载reload的时候就发现这个全局变量为false状态,则直接return。之后再用定时器setTimeout在200毫秒之后将其归位。下一次刷新不会受影响且每次刷新只会发送一次ajax,提升请求质量与用户体验。

注:此方法不仅限于实现ajax的请求重复发送问题,其他类似的重复行为可参考本实例的实现思想,注意全局变量的合理使用,减少内存浪费问题。

文档

如何解决angular分页插件tm.pagination二次触发的问题

如何解决angular分页插件tm.pagination二次触发的问题:这篇文章主要介绍了关于如何解决angular分页插件tm.pagination二次触发的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按
推荐度:
标签: 解决 的问题 触发
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top