针对angular分页插件tm.pagination二次触发问题三种解决方案

今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载列表的时候接口被请求了两次,可要知道个人网站可经不起这成倍的请求。然后就开始了漫漫资料查询路,有资料说这两个变量需要同时监听

$scope.paginationConf.currentPage
$scope.paginationConf.itemsPerPage

否则就会加载两次。当场就象暴走,懒得我还不想换,没办法所以就有了下面的更改。

第一种解决方式,也是自己的解决方式

//第一次加载标志位
$scope.loadDataFirst = 1;
//分页控件配置 
$scope.paginationConf = {
    currentPage: 1,
    totalItems: 10,
    itemsPerPage: 10,
    perPageOptions: [10, 20, 30, 40, 50],
    onChange: function() {
        if($scope.loadDataFirst == 1) {
            $scope.reloadList(); //重新加载
            $scope.loadDataFirst = 2;
        }else if($scope.loadDataFirst == 2) {
            $scope.loadDataFirst = 0;
        }else if ($scope.loadDataFirst == 0) {
            $scope.reloadList(); //重新加载
        }
    }
};

说一下思路:既然它会加载两次,那么直观的来说,初始化变量

$scope.loadDataFirst = 1。

进入监听事件判断是否为1,如果是的话加载第一页列表,将

$scope.loadDataFirst = 2;

否则进入下一判断,判断如果为2,表示第一次列表已经加载,进入第二次加载,此时不加载数据,将

$scope.loadDataFirst = 0;

最后去判断是否为零,是的话,加载数据,加载参数分页插件会设置。

为什么会有最后一个判断

  1. 不是直接else,为了灵活性,将影响控制在最小范围
  2. 在切换每页数据的时候,还会监听这里,所以必须预留一个加载结束后,可以直接执行的列表刷新

第二种解决方式,网上找的大佬的,灵感也是来自于此,只是稍作改进

$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.conf = {
    // 总条数
    total : 1190,
    // 当前页
    currentPage : 1,
    // 一页展示多少条
    itemPageLimit : 1,
    // 是否显示一页选择多少条
    isSelectPage : false,
    // 是否显示快速跳转
    isLinkPage : false
}
// 监控你的页码 , 发生改变既请求
$scope.$watch('conf.currentPage + conf.itemPageLimit' , function(news){
    // 把你的http请求放到这里
    console.log($scope.conf.currentPage , $scope.conf.itemPageLimit);
});

技术之路永无止境,一直走就好

原文链接:segmentfault.com

上一篇:浅谈2019大前端发展趋势,大佬慎入!
下一篇:复制粘贴插件——clipboard.js的使用

相关推荐

  • 🔥插件开发如此简单!

    本文使用的WebpackQuicklyStarter快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节,学习开发简单插件。

    3 个月前
  • 高级 Angular 组件模式 (3b)

    03b Enhance Components with Directives 原文: Enhance Components with Directives(https://blog.angula...

    2 年前
  • 高级 Angular 组件模式 (3a)

    03a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components ...

    2 年前
  • 页面CPU和内存占用监控可视化Chrome插件-Graph Process

    写这个插件的原因是最近要对比一下页面的 cpu 和内存占用的性能,本来是想找看看有没有什么软件能够去可视化一下当前标签页的cpu和内存占用,但是发现却找不到这种软件,mac 上有个活动监视器,但是当...

    8 个月前
  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好...

    5 年前
  • 问道Angular——Angular设置别名alias

    设置别名   在根目录下tsconfig.json中添加baseUrl和paths 访问环境变量   添加了@env别名,以便能够import { environment } fro...

    2 年前
  • 问道Angular——Angular刷新当前页面

    onSameUrlNavigation   从angular5.1起提供onSameUrlNavigation来支持路由重新加载。、   有两个值'reload'和'ignore'。

    2 年前
  • 问道Angular——APP_INITIALIZER

    概述   有时需要在加载应用之前运行代码,有时希望暂停应用初始化,直到完成某些限制之后再执行。APPINITIALIZER令牌可以完成这项操作。 APPINITIALIZER是一个函数,在应用改程...

    2 年前
  • 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网(https://www.grapecity.com.cn/),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 139239201904181526...

    1 年前
  • 通过框架设计理解react、angular、vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们...

    7 个月前

官方社区

扫码加入 JavaScript 社区