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

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

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

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

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

点击尾页后:

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

public class Page { 
  
 /** 
  * 当前页号 
  */ 
 private int currPageNum = 1; 
  
  
 /** 
  * 总记录数 
  */ 
 private int totalRowSize = 0; 
  
 /** 
  * 每页记录数 
  */ 
 private int pageRowSize = 10; 
  
 public int getCurrPageNum() { 
  return currPageNum; 
 } 
 
 public void setCurrPageNum(int currPageNum) { 
  this.currPageNum = currPageNum; 
 } 
 
 public int getTotalPageNum() { 
  int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1); 
  return total; 
 } 
 
 public int getTotalRowSize() { 
  return totalRowSize; 
 } 
 
 public void setTotalRowSize(int totalRowSize) { 
  this.totalRowSize = totalRowSize; 
 } 
 
 public int getPageRowSize() { 
  return pageRowSize; 
 } 
 
 public void setPageRowSize(int pageRowSize) { 
  this.pageRowSize = pageRowSize; 
 } 
 
 public int getFirstResult(){ 
  if(getCurrPageNum()<=0) return 0; 
   
  return getPageRowSize() * (getCurrPageNum() - 1); 
 } 
 
 public int getMaxResult() { 
  return this.getFirstResult()+this.getPageRowSize(); 
 } 
  
} 
 

然后看list_user.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
 
 
  
 异步分页 
  
  
 

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

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

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

人气教程排行