【tm-pagination】AngularJS分页插件二次请求问题的解决办法

之前使用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，正在前行的路上不断摸索，希望踩过的坑能给同样前行的你有所帮助。

不求何时抵达终点，但求余生仍在路上前行=。=