//需要导入的样式表，与js文件
/**
*css
*jPages.css控制分页按钮条的样式，不需要样式的可以不用导入
*animate.css控制要显示的数据的动画效果，不需要动画可以不用导入
*github.css这个不知道是搞什么的，不导入也没发现改变了什么
*js文件jPages.js和jquery肯定是必须的，其他的就看自己了
*/
<link rel="stylesheet"href="<%=basePath%>css/jPages.css">
<link rel="stylesheet"href="<%=basePath%>css/animate.css">
<link rel="stylesheet"href="<%=basePath%>css/github.css">
<script src="<%=basePath%>js/jquery-1.7.2.js"></script>
<script type="text/javascript"
src="<%=basePath%>js/highlight.pack.js"></script>
<script type="text/javascript"
src="<%=basePath%>js/tabifier.js"></script>
<script src="<%=basePath%>js/jPages.js"></script>
Js代码:
$("#tbody").empty();//删除tbody中已经存在的数据
var str="";
$.ajax({
url:'jq/getShipInfoByShipName.action',
data:{"shipName":$("#shipNameId").val()},//执行后台Action参数
dataType:'json',
type:'post',
//回调函数执行之前的动作
beforeSend:function(){
//这是我设置的一个加载中的图标,trShow为图标显示的行
//在数据加载出来之前，显示加载中这个图标，加载完成，隐藏
$('#trShow').css("display","block");
},
success:function(data){
var result=data;
/
/返回数据位json格式，遍历json，拼凑成table中的行
for(var i=0;i<result.length;i++){
str+="<tr><td><input type='checkbox'></td>
<td>"+result[i].shipId+"</td><td>"+result[i].shipName+"</td>
<td>"+result[0].remark+"</td></tr>";
}
//追加如tbody中
$("#tbody").append(str);
//执行分页函数,
$(function(){
//设置页数按钮所在的层,
$("div.holder").jPages({
containerID:"tbody",//显示数据所在的块的ID
css3animate
first:'首页',
last:'尾页',
previous:'上页',
next:'下页',
perPage:12,//每页显示数据为多少行
startPage:1,//起始页
startRange:2,//开始页码为2个
midRange:3,//最多显示几个页码页码，其余用..代替
endRange:2,//结束页码为2个
animation:'wobble',//数据显示的动画效果
keyBrowse:true
});
});
//数据加载完成之后，隐藏加载中这个图标
$('#trShow').css("display","none");
},
error:function(status){
alert('超时');
}
});
Html:
<body>
<div id="container">
<div><input name="shipName"id="shipNameId"/><input type="button"onclick="search()"value="查询"/></div>
<div id="page"class="holder"></div>
<table id="tab">
<tr>
<th>Check</th>
<th>ID</th>
<th>Name</th>
<th>Remark</th>
</tr>
<tr id="trShow">
<td colspan="4"align="center">
<div><img src="<%=basePath%>images/loading42.gif"/>
</div>
</td>
</tr>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>