前台实现分页，简单明了，一看就懂

学习笔记——前台页面实现分页

    一.首先，写出Person类，这里就只定义四个属性：id，姓名，年龄，性别。：

public class Person implements Serializable{
/**
*
*/
private static final long serialVersionUID = 1L;
private Integer id;
private String name;
private Integer age;
private String gender;

public Person() {
super();
}
public Person(Integer id, String name, Integer age, String gender) {
super();
this.id = id;
this.name = name;
this.age = age;
this.gender = gender;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}

}

</pre></div><div><div><pre name="code" class="java">public class PersonService implements PersonServiceDao{
ApplicationContext appCtx=new ClassPathXmlApplicationContext("applicationContext.xml");
//获取applicationContext里的hibernateTemplate
private HibernateTemplate hibernateTemplate;
public void setHibernateTemplate(HibernateTemplate hibernateTemplate){
this.hibernateTemplate=hibernateTemplate;
}

/**
* page表示要查询的页面，rows表示一页能显示多少条记录
* 这里是分页查询，使用回调方法，获取query，并且截取片段，
* 得到的list就是需要返回的结果
*/
@Override
public List<Person> getPerson(final int page,final int rows) {
List<Person> list=new ArrayList<Person>();
list=hibernateTemplate.execute(new HibernateCallback(){
@Override
public Object doInHibernate(Session session) throws HibernateException {
Query query=session.createQuery("from Person");
query.setFirstResult((page-1)*rows);
query.setMaxResults(rows);
List<Person> queryList=query.list();
return queryList;
}

});
return list;
}

//根据rows来获取一共多少页面
@Override
public int getTotalPage(int rows) {
List<Person> list=(List<Person>) hibernateTemplate.find("from Person");
int page=list.size()%rows==0?list.size()/rows:list.size()/rows+1;
return page;
}
}

下面写页面层show.jsp

<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var currentPage=0;
//首先，设置一个全局变量，表示当前页面，初始化为0，
//下面这个方法，是页面打开时就执行的方法，显示的为第一页的数据
//currentPage要先加一，然后用post方法，数据类型为json，这个用struts2很容易，配置即可
//post方法说明：
//第一个参数表示url，这里写的是一个action，
//第二个参数是需要从页面传给后台的数据，
//注意，page参数在后台一定要有一个与之对应的参数，也叫做page，后台的page就会获得currentPage
//第三个参数是一个方法，后台程序执行结束，并且成功返回，那么就会调用它，data就是获取的数据
//我们使用的是list装数据，将数据放入table容器即可，放之前要先将容器置空。
//第四个参数是返回值的类型，我们用的是“json”。
$(function(){
currentPage++;
$.post("show.action",{page:currentPage},function(data){
$("#show").empty();
for(var i=0;i<data.list.length;i++){
$("#show").append("<tr><td>"
+data.list[i].id
+"</td><td>"
+data.list[i].name
+"</td><td>"
+data.list[i].age
+"</td><td>"
+data.list[i].gender
+"</td></tr>");
}
},"json")
})

//这个方法是单击上一页按钮时会调用的方法
//currentPage减一，如果减一之后小于1，说明当前页面是首页，
//那么就会再让它加一变成1，获取第一页数据，
//如果currentPage减一之后不小于1，那么就直接执行下去即可。
//这里虽然绕了一点，但是不难，容易理解。
var previous=function(){
currentPage--;
if(currentPage<1){
currentPage++;
$.post("show.action",{page:currentPage},function(data){
$("#show").empty();
for(var i=0;i<data.list.length;i++){
$("#show").append("<tr><td>"
+data.list[i].id
+"</td><td>"
+data.list[i].name
+"</td><td>"
+data.list[i].age
+"</td><td>"
+data.list[i].gender
+"</td></tr>");
}
},"json")
}
else{
$.post("show.action",{page:currentPage},function(data){
$("#show").empty();
for(var i=0;i<data.list.length;i++){
$("#show").append("<tr><td>"
+data.list[i].id
+"</td><td>"
+data.list[i].name
+"</td><td>"
+data.list[i].age
+"</td><td>"
+data.list[i].gender
+"</td></tr>");
}
},"json");
}
};

//这个方法是单击下一页按钮后调用的方法，这里也会做一个判断，
//如果返回的list的长度为0，说明查询到的数据已经超过最后一页，也就是说到达最后一页，
//又单击了一次下一页，如果不判断，直接填充，那就是空，什么都不显示，所以这里要判断一下
//如果list长度不为0，直接填充即可。
var next=function(){
currentPage++;
$.post("show.action",{page:currentPage},function(data){
if(data.list.length==0){
currentPage--;
$.post("show.action",{page:currentPage},function(data){
$("#show").empty();
for(var i=0;i<data.list.length;i++){
$("#show").append("<tr><td>"
+data.list[i].id
+"</td><td>"
+data.list[i].name
+"</td><td>"
+data.list[i].age
+"</td><td>"
+data.list[i].gender
+"</td></tr>");
}
},"json")
}
else{
$("#show").empty();
for(var i=0;i<data.list.length;i++){
$("#show").append("<tr><td>"
+data.list[i].id
+"</td><td>"
+data.list[i].name
+"</td><td>"
+data.list[i].age
+"</td><td>"
+data.list[i].gender
+"</td></tr>");
}
}
},"json");
};

//这个方法是单击尾页按钮时调用的方法，
//调用last.action，该action具体的代码在后面，返回成功后会获取最后一个页面的页面值，
//将页面值传给currentPage，如果这里不传值，那么currentPage会停留在点击下一页时的那一页，
//当再次点击上一页或者下一页时，就会出现问题
var last=function(){
$.post("last.action",function(data){
currentPage=data.lastPage;
$("#show").empty();
for(var i=0;i<data.list.length;i++){
$("#show").append("<tr><td>"
+data.list[i].id
+"</td><td>"
+data.list[i].name
+"</td><td>"
+data.list[i].age
+"</td><td>"
+data.list[i].gender
+"</td></tr>");
}
},"json")
}

//这个方法是单击首页按钮时调用的方法，
//这里的lastPage和前面那个方法的lastPage是一个参数，
//但是在两个方法里面的值不是一样的,这里是表示首页页面值，也就是1
//意思不是字面表达的"last"，不要混淆
var first=function(){
$.post("first.action",function(data){
currentPage=data.lastPage;
$("#show").empty();
for(var i=0;i<data.list.length;i++){
$("#show").append("<tr><td>"
+data.list[i].id
+"</td><td>"
+data.list[i].name
+"</td><td>"
+data.list[i].age
+"</td><td>"
+data.list[i].gender
+"</td></tr>");
}
},"json")
}
</script>

<span style="white-space:pre">	</span><table width="500" border="1">
<tr><th>id</th><th>name</th><th>age</th><th>gender</th></tr>
<tbody id="show"></tbody>
</table>
<input type="button" onclick="first()" value="首页"/>   
<input type="button" onclick="previous()" value="上一页"/>   
<input type="button" onclick="next()" value="下一页"/>   
<input type="button" onclick="last()" value="尾页"/>   

下面写后台action

public class ShowAction extends ActionSupport {

/**
*
*/
private static final long serialVersionUID = 1L;
ApplicationContext appCtx=new ClassPathXmlApplicationContext("applicationContext.xml");
PersonService personService=appCtx.getBean("personService",PersonService.class);
private List<Person> list; //查询后的结果用这个list装
private int page; //当前页面，要与jsp里面的参数拼写一样
private static int rows=5; //一个页面所展示的记录数量
private int lastPage; //最后一页的页面值，或者首页值（1）
//提供setter和getter
public List<Person> getList() {
return list;
}
public void setList(List<Person> list) {
this.list = list;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getLastPage() {
return lastPage;
}
public void setLastPage(int lastPage) {
this.lastPage = lastPage;
}

//无论是上一页还是下一页，都是用的这个方法
public String sendList(){
list=personService.getPerson(page, rows);
setList(list);
return SUCCESS;
}

//查看最后一页，用这个方法
public String last(){
lastPage=personService.getTotalPage(rows); //获取最后一个页面的页面值
list=personService.getPerson(lastPage, rows);
setLastPage(lastPage); //将其放入valuestack,然后在页面层将其赋值给currentPage
setList(list);
return SUCCESS;
}

//查看首页，用这个方法
public String first(){
lastPage=1;
list=personService.getPerson(lastPage, rows);
setLastPage(lastPage); //将其放入valuestack,然后在页面层将其赋值给currentPage
setList(list);
return SUCCESS;
}
}

<struts>
<package name="struts" extends="json-default">
<action name="show" class="com.trace.page.action.ShowAction" method="sendList">
<result type="json"></result>
</action>
<action name="last" class="com.trace.page.action.ShowAction" method="last">
<result type="json"></result>
</action>
<action name="first" class="com.trace.page.action.ShowAction" method="first">
<result type="json"></result>
</action>
</package>
</struts>

试验结果：

在数据库插入记录，然后查询，结果如下：

1.打开页面时效果如下：



2.点击下一页，可以一直点到最后一页：



3.点击首页：



4.点击尾页：



5.点击上一页，可以一直点到第一页：



以上。
欢迎各位前辈指教！