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(解决触发二次请求的问题) DEMO: http://jqvue.com/demo/tm.pagination/index.html#?current ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- angular 分页插件的使用
html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- 分页插件 jquery.pagination.js
引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...
- 使用jQuery的分页插件jquery.pagination.js进行分页
1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...
- Mybatis Plus 3.4版本之后分页插件的变化
一.MybatisPlusInterceptor 从Mybatis Plus 3.4.0版本开始,不再使用旧版本的PaginationInterceptor ,而是使用MybatisPlusInter ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
随机推荐
- 软件工程 week 04
四则运算 一.摘要 作业地址:https://edu.cnblogs.com/campus/nenu/2016CS/homework/2266 git仓库地址:https://git.coding.n ...
- laravel 语言插件
aravel 5 语言包,包含 52 种语言, 基于 caouecs/Laravel-lang. trans() 函数根据你的 [本地化文件] 翻译指定的语句 安装 composer require ...
- WPF中获取控件默认样式和模板XML
从微软官方找这个东西甚是困难,似乎根本没有提供.网上说因为版本问题,很难找到,但通过代码却可以轻易获得.经测试,生成的样式文件非常完美,完全不用修改即可应用. 代码如下: public static ...
- zabbix之 zabbix server 跟 agent 更换ip地址
描述: zabbix server端跟agent端更改 ip . 改完之后,相应配置文件 (zabbix_agentd.conf.zabbix_server.conf)的ip也进行了替换 但是依旧报错 ...
- pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从package.json的 "gitHooks"属性中读取
pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从packag ...
- .NET代码执行效率优化
NET性能优化方面的总结 从2004年底开始接触C#到现在也有2年多的时间了,因为有C++方面的基础,对于C#,我习惯于与C++对比.现在总结一些.NET方面的性能优化方面的经验,算是对这两年多的.N ...
- html/css/js-如何利用jq来更改属性的值和获取属性的值
jquery的使用在web开发中是非常广泛的,虽然说比较容易,易学,但在开发过程中,也总是会碰到各种各样的小问题. 我曾经就遇到这种问题,jq如何获取属性值和更改属性值的. 众所周知,attr()可以 ...
- [编程小技巧]Notepad++中如何实现文本对比功能?
1.打开Notepad++插件中心 2.安装Compare 3.按提示重启Notepad++ 4.点击Compare比较临近的两个文件 5. 取消比较 6 Comp ...
- python中的第三方日志模块logging
基本上每个系统都有自己的日志系统,可以使自己写的,也可以是第三方的.下面来简单介绍一下python中第三方的日志模块,入手还是比较简单的,但是也很容易给自己埋雷. 下面是我参考的资料链接 入手demo ...
- cookies的常见方式
cookie有如下特点 保存在客户端,一般由浏览器负责存储在本地. 通常是加密存储的,不过由于存储在本地,很难保证数据不被非法访问,并不怎么安全,所以cookies中不宜保存敏感信息,如密码等. 哪些 ...