之前使用Angular分页插件<tm-pagination>也没过多深究,今天在实现数据缓存的时候,在查询列表的方法中直接将数据添加到缓存,完事顺便打了一个log,正是这个log我才发现这个分页插件默认会向后台进行二次请求,这。。。如何受得了=。=
查找相关资料,整理如下:
(参考:https://blog.csdn.net/blog635/article/details/85327301)
解决方法一:
$scope.reload=true;//设置加载标志位,初始化为true
$scope.paginationConf = {
currentPage : 1,
totalItems : 10,
itemsPerPage : 8,
perPageOptions : [ 10, 20, 30, 40, 50 ],
onChange : function() {
//每次触发时,先判断
if(!$scope.reload){
return;
}
// 重新加载数据
$scope.reloadList();
//将加载标志位设置为false,表示已经进行了第一次加载
$scope.reload=false;
setTimeout(function() {
$scope.reload = true;
}, 200);
}
};
说一下最后这个setTimeout方法:是因为scope.reload是一个全局变量,上一句将scope.reload设置为false之后,若进行下一页查询,则就会进入到if条件判断中直接就return了,所以说通过setTimeout方法设置scope.reload变量在一定时间后为true,以方便用户进行下一页查询等操作。
解决方法二:
//第一次加载标志位
$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;
onchange触发之后先判断是否为1,如果是则加载数据列表,同时将 $scope.loadDataFirst = 2;
若不是1,判断如果是2,说明已经加载过一次了,那么就不进行数据加载,但是将$scope.loadDataFirst = 0;
(此处将$scope.loadDataFirst 设置为0也是为了用户进行下一页查询数据的加载)
当判断为0的时候,就再次进行加载数据。
整体思路如下:
当onchange第一次触发之后,判断变量为1,因此加载数据,并将$scope.loadDataFirst = 2;紧接着会进行第二次触发(因为这个控件默认就是两次触发,我们能做的就是当第二次触发的时候不进行后台访问),这时,判断变量为2,则设置变量为0;到此就完成了第一页的数据查询,当用户点击下一页的时候,这时会判断变量为0,因此就加载第二页的数据了。
解决方法三:
$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://blog.csdn.net/blog635/article/details/85327301
我是小k,正在前行的路上不断摸索,希望踩过的坑能给同样前行的你有所帮助。
不求何时抵达终点,但求余生仍在路上前行=。=