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

2019-10-11 admin

今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是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);
});

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

[转载]原文链接:https://segmentfault.com/a/1190000020653043

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77159.html

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

相关文章
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
HTML5这次的火热是否又是昙花一现?
即使你不是技术控,你也应该感受到过去一年时间身边发生的HTML5事件,去年由微信朋友圈引爆的《围住神经猫》以及之后一系列的小游戏,都证明了HTML5的营销价值。 HTML5已经出来很多年了,HTML5是一个基于浏览器的协作标准,可以让各种不...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
回到顶部