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

實現與後臺交互點擊上一頁。。。下一頁。。。跳轉頁。。。

可以在我的資源直接下載用哦