无限分页infinite-scroll整合SpringMVC

阅读本文可能会解决的问题：

① infinite-scroll.js和html页面的整合
② infinite-scroll.js的配置
③ 翻页时的传参问题
④ 前台及后台分页配置
⑤ 数据加载格式及和SpringMVC配合返回数据

⑥ ...

这里先说几句无关的话，无限翻页是一个很简单的需求，为了节省网络资源提高用户体验很多网站都使用这种形式，但是在自己做的时候发现一个很实用的js插件被很多人描述的很潦草，还有的居然骗下载赚积分，真的过分！自己研究之后决定记录一下，方便自己也分享给大家。

这个示例实现的效果：打开页面鼠标滚轮滑到页面底部，自动加载下一页数据，直到所有数据加载完成。

一、infinite-scroll.js和html页面的整合及配置

1. 首先需要引入两个js文件，jQuery就不说了，jquery.infinitescroll.js可以在 infinitescroll中文网下载，或者去 官网下载最新的版本，中文网提供了3.X之前的几个版本可以下载使用，我这里选择2.0的版本

	<script src="../js/home/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../js/home/jquery.infinitescroll.js"></script>

引入js后需要注意：

① 用户第一次打开页面需要预先加载几条数据

② 我这里都是动态从后台获取的数据

③ 在界面加载数据我使用模板语言thymeleaf，如果是jsp直接用EL表达式获取数据即可

④ ul就是要填充下一页数据的容器每次执行翻页就会向ul中添加新取回的li