jquery java struts2 分页插件 非常好看 可自定义修改样式

不多说先上效果图：样式一：

样式二：(该样式只需要修改jquery.pagination.js中 activeCls: 'disabled', //当前页选中状态 样式即可)

jsp 页面代码查询部分

<form action="<%=basePath %>list_.do?param=sgdw" method="post" id="form">
				<input type="hidden" name="pageNum" id="pageNum" /><!-- 当前页码 也是需要跳转的页码 -->
				<input type="hidden" name="badLevel" />
				<table class="borderTable" style="width: 100%; margin-bottom: 10px;" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td>施工单位名称</td>
						<td>
							<input type="text" id="sname" name="sname" style="width: 98%;" value="${map.name }" />
						</td>

						<td>法定代表人</td>
						<td>
							<input type="text" id="slegalperson" name="slegalperson" style="width: 98%;" value="${map.legalperson }" />
						</td>

						<td>联系人或负责人</td>
						<td>
							<input type="text" id="scontactperson" name="scontactperson" style="width: 98%;" value="${map.contactperson }" />
						</td>
						<td> </td>
					</tr>
					<tr>
						<td>专业类别</td>
						<td>
							<s:select label="专业类别" name="smajorstype" id="smajorstype" value="map.majorstype" style="width: 98%;" list="map.zylb" listKey="id" listValue="name" theme="simple" />
						</td>
						<td>录入单位</td>
						<td>
							<input type="text" id="screateunit" name="screateunit" style="width: 98%;" value="${map.createunit }" />
						</td>
						<td>评价等级</td>
						<td>
							<s:select label="评价等级"  name="sappraiselevel" id="sappraiselevel" value="map.appraiselevel" style="width: 98%;" list="map.pjdj" listKey="id" listValue="name" theme="simple" />
						</td>
						<td>
							<input type="submit" value=" 查 询 " class="loginBtn" />
						</td>
					</tr>
				</table>
			</form>

分页部分

<tr style="background-color: white;">
						<td colspan="8" style="text-align: right; padding-right: 30px;"
							 class="pageCode" id="pageTD">
						</td>
						</tr>

分页的实现

<script type="text/javascript" src="jquery.pagination.js"></script>
<link rel="stylesheet" type="text/css" href="jquerypage.css"/>
<script type="text/javascript">
$(function(){
    $('#pageTD').pagination({
         pageCount: '<s:property value="totalPage"/>',
         current: '<s:property value="pageNum"/>',
         jump:true,
         coping:true,
         homePage:'首页',
         endPage:'尾页',
         prevContent:'上一页',
         nextContent:'下一页',
         callback:function(api){
            $('#pageNum').val(api.getCurrent()); 
            $('#form').submit(); //查询form
         }
     });
});
</script>

样式css  ,可自定义修改样式

.pageCode{padding: 15px 20px;text-align: left;color: #ccc;}  
.pageCode a{
	display: inline-block;
	color: #428bca;
	display: inline-block;
	height: 25px; 
	line-height: 25px;  
	padding: 0 10px;
	border: 1px solid #ddd; 
	margin: 0 2px;
	border-radius: 4px;
	vertical-align: middle;
}  
.pageCode a:hover{
	text-decoration: none;
	border: 1px solid #428bca;
}  
.pageCode span.current{
	display: inline-block;
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
	margin: 0 2px;
	color: #fff;
	background-color: #428bca; 
	border: 1px solid #428bca;
	border-radius: 4px;
	vertical-align: middle;
}  
.pageCode span.disabled{ 
	display: inline-block;
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
	margin: 0 2px; 
	color: #bfbfbf;
	background: #f2f2f2;
	border: 1px solid #bfbfbf;
	border-radius: 4px;
	vertical-align: middle;
}
.pageCode input{
    margin:0 5px;
    width: 30px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #fff;
    border: 1px solid #ebebeb;
    outline: none;
    color: #bdbdbd;
    font-size: 14px;
}

java代码

public class PageAction extends ActionSupport  {
	private static final long serialVersionUID = 1L;
	private Map<String, Object> map = new HashMap<String, Object>();
	private int pageSize = 10; // 页容量  
	private int pageNum = 1; // 当前页  
    private int totalPage;  // 总页数  
    private int allCount = 666;  // 总记录数  
    private int startPage = 1;  // 开始页码  
    private int endPage = 10;  // 结束页码  
    
    public String getData(){
    	try{
    		List<Map<String, Object>> list = null;//按分页得到数据
    		allCount = 100; //得到数据的总条数
			totalPage = (int) Math.ceil((double) allCount / (double) pageSize);  
            endPage = totalPage;  //结束页 = 总页数
	        if (startPage < 1) {  
	            startPage = 1;  
	        }  
	        map.put("list", list);
    	}catch (Exception e) {
			// TODO: handle exception
		}
    	return SUCCESS;
    }
    
	public Map<String, Object> getMap() {
		return map;
	}
	public void setMap(Map<String, Object> map) {
		this.map = map;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getPageNum() {
		return pageNum;
	}
	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getAllCount() {
		return allCount;
	}
	public void setAllCount(int allCount) {
		this.allCount = allCount;
	}
	public int getStartPage() {
		return startPage;
	}
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
	public int getEndPage() {
		return endPage;
	}
	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}

}

这款分页是我自己根据jquery pagination 分页插件自己修改的。可以参考api

实现与后台交互点击上一页。。。下一页。。。跳转页。。。

可以在我的资源直接下载用哦