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

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

    一.首先，写出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里的hibernateTemplateprivate HibernateTemplate hibernateTemplate; public void setHibernateTemplate(HibernateTemplate hibernateTemplate){this.hibernateTemplate=hibernateTemplate;}/** * page表示要查询的页面，rows表示一页能显示多少条记录 * 这里是分页查询，使用回调方法，获取query，并且截取片段， * 得到的list就是需要返回的结果 */@Overridepublic List<Person> getPerson(final int page,final int rows) {List<Person> list=new ArrayList<Person>();list=hibernateTemplate.execute(new HibernateCallback(){@Overridepublic 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来获取一共多少页面@Overridepublic 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和getterpublic 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,然后在页面层将其赋值给currentPagesetList(list);return SUCCESS;}//查看首页，用这个方法public String first(){lastPage=1;list=personService.getPerson(lastPage, rows);setLastPage(lastPage); //将其放入valuestack,然后在页面层将其赋值给currentPagesetList(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.点击上一页，可以一直点到第一页：

以上。

欢迎各位前辈指教！