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

2020-05-27 18:10:04易采站长站整理

写了一个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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>异步分页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../css/local.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/asyn_page.js"></script>
<script type="text/javascript">
var totalRowSize = ${totalRowSize};
$(document).ready(function(){
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);
});

//构建内容
function buildHtml(users){
$.each(users,function(i,user){
var tr = [
'<tr>',
'<td>',user.userId,'</td>',
'<td>',user.username,'</td>',