前台搜索结果分页（Angular，Solr）

绝地灬酷狼 2022-10-02 14:42 116阅读 0赞

管理后台的分页使用的是分页控件。对于后台其实无所谓，他那个分页控件做得好看还是丑啊，对于用户来说并不会很重要，因为他是放到后台的。但是如果说你要放到前台的话，我们还是要讲究一下整个页面的美感。这个时候肯定是要自己来实现分页。因为之前使用的分页控件，它的样式是很难改变的，因为它是封装好的。

### 1.后端 ###

前端需要向后端传递当前页码(pageNo)和当前页的记录数(pageSize)。

Integer pageNo = (Integer) searchMap.get("pageNo");// 获取当前页码
    if (pageNo == null) { 
    	pageNo = 1;
    }
    Integer pageSize = (Integer) searchMap.get("pageSize");// 一页的记录数
    if (pageSize == null) { 
    	pageSize = 20;
    }
    // 设置每页的起始索引
    query.setOffset((pageNo - 1) * pageSize);
    // 设置每页的记录数
    query.setRows(pageSize);

### 2.前端 ###

一次只显示5页。以中间的页码为`当前页`向两边加2和减2  
定义两个变量：  
  `开始页码`  
  `最后页码`  
如果`总页数`<5  
  显示全部页码  
如果`总页数`<5  
  如果`当前页`<=3  
    显示前5页  
    `最后页码`=5；  
  如果`当前页`>=`总页数`\-2  
    显示后5页  
    `开始页码`=`总页数`\-4;  
  否则  
    显示中间5页，以当前页为中间进行加2和减2  
    `开始页码`=`当前页`\-2;  
    `最后页码`=`当前页`\+2;

// 构建分页栏
    buildPageLabel = function() { 
    	// 构建分页栏
    	$scope.pageLabel = [];
    	// 定义开始页码
    	var firstPage = 1;
    	// 定义最后页码
    	var lastPage = $scope.resultMap.totalPages;
    	
    	if ($scope.resultMap.totalPages > 5) { 
    		if ($scope.searchMap.pageNo <= 3) { 
    			lastPage = 5;
    		} else if ($scope.searchMap.pageNo >= $scope.resultMap.totalPages - 2) { 
    			firstPage = $scope.resultMap.totalPages - 4;
    		} else { 
    			firstPage = $scope.searchMap.pageNo - 2;
    			lastPage = $scope.searchMap.pageNo + 2;
    		}
    	}
    
    	for (var i = firstPage; i <= lastPage; i++) { 
    		$scope.pageLabel.push(i);
    	}
    }