java ssh+jquery无刷新分页
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>浏览拍卖中的物品</title>
<link href="images/css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery/json2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
find();
$("#pageSize").bind("keyup",function(){find();});
//设置键盘 监听事件 也就是当你在该文本框中输入值后 就立刻执行相对应的方法 这里所表示的是 当你在文本框中输入4 等 就会在页面上显示4条数据
$("#pageNo").bind("keyup",function(){find();});
//设置键盘 监听事件 也就是当你在该文本框中输入值后 就立刻执行相对应的方法 这里所表示的是 当你在文本框中输入5 等 就会在页面上显示第五条页
alert(" find()");
});
function find(){
$.post('item.do?operate=ches','pagesize='+$("#pageSize").val()+'&pageno='+$("#pageNo").val(),function(data){//val()获取文本框里的值
//function(data) 里面的data 是 action中返回来 （return）的数据 结果
$("#kind").text("");//清空tr里面的 td 否则 会打印出很多重复的 数据
$.each(data,function(i,n){
//alert(n.itemName);
var mod=$("#tr").clone();//在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
mod.find("#itemname").html("<a href='item.do?operate=wupinxiangxi&itemId="+n.itemId+"'>"+n.itemName+"</a>");
mod.find("#kindname").text(n.itemName);
mod.find("#addtime").text(n.addtime);
mod.find("#maxPrice").text(n.maxPrice);
mod.find("#username").text(n.itemName);
mod.find("#itemremark").text(n.itemRemark);
mod.show();
$("#kind").append(mod);
})
},'json')
}
</script>
<script type="text/javascript">
var pageTotal =0;//根据数据库中的数据判断能显示几页
function page_tptal()//拿到值
{
var count=parseInt($("#count").val());//拿到共查询到了几次页面
var pageNo =parseInt($("#pageNo").val());//拿到当前显示的页数
var pageSize =parseInt($("#pageSize").val());//拿到当前显示的行数
alert(count+" "+pageNo+" "+pageSize);
if(count%pageSize!=0){pageTotal=parseInt(count/pageSize)+1;}
else if(count%pageSize==0){pageTotal=count/pageSize;}
}
function page_first()//第一页
{
$("#pageNo").val("1");
find();
alert("第一页"+$("#pageNo").val());
//getItemList();
}
function page_pre()//上一页
{
var pageNo=parseInt($("#pageNo").val());
var pag=pageNo-1;
alert("上一页"+pag);
$("#pageNo").val(pag);
page_validate();
find();
//getItemList();
}
function page_next()//下一页
{
var pageNo=parseInt($("#pageNo").val());
var pag=pageNo+1;
alert("下一页"+pag);
$("#pageNo").val(pag);
page_validate();
find();
//getItemList();
}
function page_last()//最后一页
{
page_tptal();
$("#pageNo").val(pageTotal);
alert("最后一页"+$("#pageNo").val());
find();
//getItemList();
}
function page_validate()
{
page_tptal();
var count=parseInt($("#count").val());//拿到共查询到了几次页面
var pageNo =parseInt($("#pageNo").val());//拿到当前显示的页数
var pageSize =parseInt($("#pageSize").val());//拿到当前显示的行数
if(pageSize<0){alert("请输入大于0的数字");pageSize=10;}
else if(pageSize<count)
{
if(pageNo>pageTotal)
{
pageno=pageNo-1;
$("#pageNo").val(pageno);
}
if(pageNo<1)
{
pageno=pageNo+1;
$("#pageNo").val(pageno);
}
}
else {alert("输入有误");$("#pageSize").val(10)}
}
function tj(){
find();
}
</script>
</head>
<body>
<%@include file="header.jsp"%>
<table width="780" align="center" CELLSPACING=0 background="images/bodybg.jpg">
<tr>
<td>
<br>
<table width=80% border=0 align="center" cellpadding=0 cellspacing="1" bgcolor="#CCCCCC">
<tr class="pt9" height="30">
<td bgcolor="#FFFFFF"><b>物品名</b></td>
<td bgcolor="#FFFFFF"><b>种类</b></td>
<td bgcolor="#FFFFFF"><b>起拍时间</b></td>
<td bgcolor="#FFFFFF"><b>最高价格</b></td>
<td bgcolor="#FFFFFF"><b>所有者</b></td>
<td bgcolor="#FFFFFF"><b>物品备注</b></td>
</tr>
<tr id="tr" style="display:none;">
<td id="itemname" bgcolor="#FFFFFF"></td>
<td id="kindname" bgcolor="#FFFFFF"></td>
<td id="addtime" bgcolor="#FFFFFF"></td>
<td id="maxPrice" bgcolor="#FFFFFF"></td>
<td id="username" bgcolor="#FFFFFF"></td>
<td id="itemremark" bgcolor="#FFFFFF"></td>
</tr>
<tr id="kind" class="pt9" height="24">
</tr>
</table>
</TD>
</TR>
<tr><td colspan="6"><span id="sun">共${count}条记录</span>
<input type="hidden" value="${count}" name="count" id="count"/>
每页显示<input name="pageSize" value="${pageSize}" size="3" id="pageSize"/>条
第<input name="pageNo" value="${pageNo}" size="3" id="pageNo"/>页
<a href="javascript:page_first();">第一页</a>
<a href="javascript:page_pre();">上一页</a>
<a href="javascript:page_next();">下一页</a>
<a href="javascript:page_last();">最后一页</a>
<button id="go" onclick="tj()">GO</button>
</td></tr>
</TABLE>
<%@include file="footer.jsp"%>
</body>
</html>
