ajax + mybaties-plus分页插件实现滚动加载，同时实现按不同方式排序

最近在做一个论坛项目，文章列表的加载想用ajax做一个滚动加载，有的文章实现了滚动加载，但是没有按不同方式排序的选项的滚动加载，这样的话，就自己写一个吧，由于不怎么会前端，写的可太费劲了，有时间还是要学学vue啥的，但是毕设项目嘛，先做完才是王道。

效果图：

 

后台接口：

@GetMapping("/getPages")
    public String getArticalPages(Model model,HttpServletRequest request){
        Integer sortMethod = Integer.valueOf(request.getParameter("sortMethod"));
        Integer current = Integer.valueOf(request.getParameter("current"));

        List<ArticalInformation> articalPages = articalInformationService.getArticalPages(current,sortMethod);

        model.addAttribute("articalList",articalPages);
        return "list::articalList";
    }

 前端

<div class="content-wrap">
		<div class="content">
			<div class="row">
				<div class="sort-method" th:value="1"></div>
				<div class="pageno" th:value="1"></div>
				<div class="finish" th:value="0"></div>
				<span> &nbsp;&nbsp;&nbsp;所有文章列表</span>
				<a onclick="changeSortMethod2()"><span> &nbsp;&nbsp;&nbsp; 按点赞量排序</span></a>
				<a onclick="changeSortMethod3()"><span>&nbsp;&nbsp;&nbsp;  按评论量排序</span></a>
				<a onclick="changeSortMethod4()"><span>&nbsp;&nbsp;&nbsp;  按浏览量排序</span></a>
			</div>

			<div th:value="${pagesCount}" class="pagesCount" th:id="pagesCount"></div>
			<div th:fragment="articalList" class="articalList">
				<div th:value="${concernError}" id="concernError"></div>
				<div th:each="artical:${articalList}">
					<article class="excerpt"  style="">
						<a class="focus" th:href="@{/artical(id=${artical.getId()})}"  target="_blank" ><img class="thumb"  th:src="${artical.getHeadImg()}" alt="用DTcms做一个独立博客网站（响应式模板）"  style="display: inline;"></a>
						<header><a class="cat" href="#" th:title="${artical.getTag()}" th:text="${artical.getTag()}"><i></i></a>
							<h2><a  th:title="${artical.getTitle()}" th:href="@{/artical(id=${artical.getId()})}" th:text="${artical.getTitle()}" ></a>
							</h2>
						</header>
						<p class="meta">
							<time class="time" ><i class="glyphicon glyphicon-time"></i> <span th:text="${artical.getGmtCreate()}"></span></time>
							<span class="views" ><i class="glyphicon glyphicon-eye-open"></i> <span th:text="${artical.getViewCount()}"></span> </span> <a class="comment" href="##comment" title="评论" target="_blank" ><i class="glyphicon glyphicon-comment"></i> <span th:text="${artical.getCommentCount()}"></span></a>
						</p>
						<p class="note" th:text="${artical.getDescription()}"></p>
					</article>
				</div>
			</div>

		</div>
	</div>

function changeSortMethod2(){
		$(".jieshu").remove();

		$(".finish").attr("value","0");
		//更换排序方式
		$(".sort-method").attr("value","2");
		//重新计算当前要获得的页数
		$(".pageno").attr("value","1");
		//将当前页面清空
		$(".articalList").empty();
		getPages("1");
	}

	function changeSortMethod3(){
		$(".jieshu").remove();

		$(".finish").attr("value","0");
		//更换排序方式
		$(".sort-method").attr("value","3");
		//重新计算当前要获得的页数
		$(".pageno").attr("value","1");
		//将当前页面清空
		$(".articalList").empty();
		getPages("1");
	}

	function changeSortMethod4(){
		$(".jieshu").remove();

		$(".finish").attr("value","0");
		//更换排序方式
		$(".sort-method").attr("value","4");
		//重新计算当前要获得的页数
		$(".pageno").attr("value","1");
		//将当前页面清空
		$(".articalList").empty();
		getPages("1");
	}

前端处理进度条划到底端

<script type="text/javascript">
	//数据是按页划分,一页显示规定条数的数据
	var totalPages = document.getElementById("pagesCount").getAttribute("value");//总页数


	$(function(){
		//获取滑轮滚动事件
		$(window).scroll(function() {
			//滚动的距离
			var scrollTop = $(this).scrollTop();
			//当前窗口的高度
			var windowHeight = $(this).height();
			//文档总高度
			var scrollHeight = $(document).height();

			var positionValue = (scrollTop + windowHeight) - scrollHeight;

			if (positionValue >= -0.7) {
				//判断当前页数是否小于总页数
				var pageno = $(".pageno").attr("value");
				if (pageno < totalPages&&$(".finish").attr("value") === "0") {
					pageno++;
					$(".pageno").attr("value",pageno);
					var txt='<div class="loadmore"><span class="loading" ></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
							'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
							'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加载中..</div>'
					$(".content").append(txt);
					setTimeout(function (){
						//执行从后台获取数据
						getPages(pageno);
					},1000);

				} else {
					$(".loadmore").remove();
					if ($(".finish").attr("value") === "0"){
						var txt='<div class="jieshu"><span class="loading" ></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
								'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
								'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已经到底啦</div>'
						$(".content").append(txt);
					}
					$(".finish").attr("value","1");
				}
			}
		})
	});

	function getPages(pageno) {
		$.ajax({
			type : "GET",
			url : "http://localhost:8080/getPages",
			data : {"current":pageno,"sortMethod":$(".sort-method").attr("value")},
			//是预期服务器返回的数据类型，很多人返回的是json或jsonp和text
			success : function (data) {
				//直接将返回的html数据用jquery追加到ulbloglist后
				$(".loadmore").remove();
				$(".articalList").append(data);
			},
			error : function() {
			}
		});
	}
</script>

这样的话，就实现了进度条划到最底端的时候，先显示加载中，一秒后显示加载信息，最后显示已经到底，写controller时注意直接将第一页的信息返回，进度条到底部直接从第二页开始加载获取即可。

感觉自己前端太菜了，这种写法连我自己都觉得很奇怪。