详解angular分页插件tm.pagination二次触发问题解决方案

2024-10-15 04:51:10

今天在学习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的请求重复发送问题，其他类似的重复行为可参考本实例的实现思想，注意全局变量的合理使用，减少内存浪费问题。

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

angularjs实现的前端分页控件示例

前言:之前写个一个jQuery的分页显示插件,存在许多的bug,现在由于业务需要,学习的一点AngularJS,重新用angularjs实现了这个分页插件实现效果图: (效果图是加上了bootstrap的css文件) 用法: angular-pagination.js代码: /** * angularjs分页控件 * Created by CHEN on 2016/11/1. */ angular.module('myModule', []).directive('myPagination',
AngularJS 前台分页实现的示例代码

考评员查询,因为整体的数据量比较小,所以我们可以将分页放到前台进行处理. 其实分页的原理也很简单,我们根据分页选择的页码数和每页数据条数决定当前显示的是数组中的第多少项到多少项,然后再构造分页的参数传入已有的分页指令. // 初始化分页参数 $scope.pageParams = { size: $stateParams.size, // 每页数据条数 page: $stateParams.page, // 页码数 last: undefined, // 是否首页 first: undefine
angularjs实现分页和搜索功能

本文实例为大家分享了angularjs实现分页和搜索展示的具体代码,供大家参考,具体内容如下话不多说,上代码 <html class="no-js" ng-app="myApp"> <body ng-controller="mainController"> <table class="am-table am-table-striped am-table-hover table-main">
Angular2自定义分页组件

在项目中,前端传给后台的参数有: pageSize:每页的条数 pageNo:当前页码比如当前是第1页,每页20条,则后台返回第1页的20条记录(sql应该是用limit去获取分页数据) 同时,后台接口还会返回列表的总条数totalNum,前端根据totaNum/pageSize计算总共有多少页如图: 注意事项: 需要先配置好路由(Angular2路由与导航) 使用步骤: (1)在项目中引入分页组件 // app.module.ts import { BrowserModule } from
AngularJs分页插件使用详解

angularUI bootstrap提供的分页插件满足了大部分应用的需求,具体内容如下在项目需求中,新增了两个需求: 1.自由设定每页显示的条目: 2.可以手动输入页面,跳转到指定的页数. html代码 <div class="pagination-define p20 mt20" ng-hide="totalItems==0"> <select ng-model="perPageSize" ng-change="
Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的是真实接口数据. 首先.小demo的目录结构如下: 一.代码部分下面直接把每一个文件的代码贴出来,重点是ListCtrl.js和pageDirective.js: 1.index.html <!DOCTYPE html> <html lang="en" ng-app=&
Angular+Bootstrap+Spring Boot实现分页功能实例代码

需要用到的js angular.js(用angular.min.js会导致分页控件不显示) ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由,所以讲js以及css文件的应用都放在一个主html,请同学们在html页面中添加以上文件在开始之前,我先简单介绍下分页的原理. 分页的实质其实就是一条sql语句, 比如查找第二页,即第16到第30条数据在MySQL中是select * fr
AngularJS与BootStrap模仿百度分页的示例代码

模仿百度的每页显示10条数据, 实现了当前页居中的算法. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BootStrap+AngularJS分页显示 </title> <script type="text/javascript" src="../js/jquery.js"></scr
详解angular分页插件tm.pagination二次触发问题解决方案

今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心和感到不舒服的事情. 于是在网上也找到了靠谱的解决方案:http://jqvue.com/tm.pagination/ ,且在此维护者的这个版本中解决了此问题,同时注意 angularjs版本的配合使用.但是不满足于现状,我还是找到了自己的解决方案,不打针不吃药,就这么简单!粗暴!It's time
详解Angular组件之生命周期(二)

一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child
详解Mybatis分页插件 - 示例代码

这里说最好用,绝对不是吹的,不过有好多人都不理解为什么要用这个插件,自己手写分页sql不是挺好吗...... 所以我特地写这样一个例子来讲为什么最好用. 假设我们已经写好了Mapper的接口和xml,如下: public interface SysLoginLogMapper { /** * 根据查询条件查询登录日志 * @param logip * @param username * @param loginDate * @param exitDate * @return */ List<Sy
详解Angular父子组件通讯

概述 Angular组件间通讯组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来
详解Angular结构型指令模块和样式

一,结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template. <ng-template [ngIf]="item.reminder"> <mat-icon > alar
详解Angular路由动画及高阶动画函数

一.路由动画路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 在router.animate.ts中定义一个进场动画,一个离场动画. 因为进场动画和离场动画用的特别频繁,有一个别名叫:enter和:leave. import { trigger, state, transition, style, animate} from '@angular/animations'; export const slideToR
详解Angular动态组件

使用场景我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现然后我们来找个把手,看
详解Angular组件之投影

概述运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-content>指令来标记投影点 <div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content>
详解Angular组件生命周期(一)

概述组件声明周期以及angular的变化发现机制红色方法只执行一次. 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法. 总共9个方法. 每个钩子都是@angular/core库里定义的接口. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-life', templateUrl: './life.component.html', styleUrls: ['./life
详解Angular组件之中间人模式

一.中间人模式该组件树中除了组件1以外,每个组件都有一个父组件可以扮演中间人的角色.顶级的中间人是组件1,它可以使组件2,组件3,组件6之间互相通讯.依次类推,组件2是组件4和组件5的中间人.组件3是组件7和组件8的中间人. 中间人负责从一个组件接收数据并将其传递给另一个组件. 二.例子股票报价组件为例,假设交易员在监看着报价组件的价格,当股票价格达到某一个值的时候,交易员会点一个购买按钮,来购买股票.问题:报价组件并不知道应该如何下单来买股票,它只是用来监控股票价格的.所以报价组件在这时应

详解angular分页插件tm.pagination二次触发问题解决方案

相关推荐

随机推荐