不多说先上效果图:样式一:
样式二:(该样式只需要修改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
实现与后台交互点击上一页。。。下一页。。。跳转页。。。
可以在我的资源直接下载用哦