当前位置:Gxlcms > JavaScript > 利用JQuery写一个简单的异步分页插件_jquery

利用JQuery写一个简单的异步分页插件_jquery

时间:2021-07-01 10:21:17 帮助过:4人阅读

写了一个Jquery异步分页插件,拿出来分享一下,有不完善之处请指教。
以用户分页为例,先看一下效果,首先是第一页:

下一页或者点击第二页后:

点击尾页后:

效果还可以吧?来看看具体怎么用,首先后台要有一个Page模型:
Page.java:

  1. public class Page {
  2. /**
  3. * 当前页号
  4. */
  5. private int currPageNum = 1;
  6. /**
  7. * 总记录数
  8. */
  9. private int totalRowSize = 0;
  10. /**
  11. * 每页记录数
  12. */
  13. private int pageRowSize = 10;
  14. public int getCurrPageNum() {
  15. return currPageNum;
  16. }
  17. public void setCurrPageNum(int currPageNum) {
  18. this.currPageNum = currPageNum;
  19. }
  20. public int getTotalPageNum() {
  21. int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1);
  22. return total;
  23. }
  24. public int getTotalRowSize() {
  25. return totalRowSize;
  26. }
  27. public void setTotalRowSize(int totalRowSize) {
  28. this.totalRowSize = totalRowSize;
  29. }
  30. public int getPageRowSize() {
  31. return pageRowSize;
  32. }
  33. public void setPageRowSize(int pageRowSize) {
  34. this.pageRowSize = pageRowSize;
  35. }
  36. public int getFirstResult(){
  37. if(getCurrPageNum()<=0) return 0;
  38. return getPageRowSize() * (getCurrPageNum() - 1);
  39. }
  40. public int getMaxResult() {
  41. return this.getFirstResult()+this.getPageRowSize();
  42. }
  43. }

然后看list_user.jsp:

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <title>异步分页</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

可以看到id为tbody的元素是作为分页内容展示容器,id为pageWidget的元素作为分页控件展示容器。
然后提供了一个buildHtml()函数来具体构建分页内容的。
使用异步分页插件很简单,只要这么调用:

这是最简化调用。还可以传额外查询参数,以及定制每页显示记录数,具体使用方式见插件的具体介绍。
下面是asynPage插件内容:

以上就是本文的全部内容,希望对大家的学习有所帮助。

人气教程排行