不多说,直接贴代码:
下面是js部分:
复制代码 代码如下:
var pageSize = "10";//每页行数
var currentPage = "1";//当前页
var totalPage = "0";//总页数
var rowCount = "0";//总条数
var params="";//参数
var url="activity_list.action";//action
$(document).ready(function(){//jquery代码随着document加载完毕而加载
//分页查询
function queryForPages(){
$.ajax({
url:url,
type:'post',
dataType:'json',
data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params,
success:function callbackFun(data){
//解析json
var info = eval("("+data+")");
//清空数据
clearDate();
fillTable(info);
}
});
}
//填充数据
function fillTable(info){
if(info.length>1){
totalPage = info[info.length-1].totalPage;
var tbody_content="";//不初始化字符串"",会默认"undefined"
for(var i=0 ; i<info.length-1;i++){
tbody_content +="<tr>"
+"<td data-title='序号' >"+(i+1+(currentPage-1)*pageSize)+"</td>"
+"<td data-title='标题'>"+info[i].title.substr(0,20)+"</td>"
+"<td data-title='地点'>"+info[i].address.substr(0,6)+"</td>"
+"<td data-title='已报名'>"+info[i].quota_sign+"人</td>"
+"<td data-title='类别'>"+info[i].type+"</td>"
+"<td data-title='操作'><a href='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>编辑</a></td>"
+"</tr>"
$("#t_body").html(tbody_content);
}
}else{
$("#t_head").html("");
$("#t_body").html("<div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>"+info.msg+"</div>");
}
}

//清空数据
function clearDate(){
$("#t_body").html("");
}

//搜索活动
$("#searchActivity").click(function(){ queryForPages(); });
//首页
$("#firstPage").click(function(){
currentPage="1";
queryForPages();
});
//上一页
$("#previous").click(function(){
if(currentPage>1){
currentPage-- ;
}
queryForPages();
});
//下一页
$("#next").click(function(){
if(currentPage<totalPage){
currentPage++ ;
}
queryForPages();
});
//尾页
$("#last").click(function(){
currentPage = totalPage;
queryForPages();
});

});

下面是html代码部分:
复制代码 代码如下:
<table class="table style-5">
<thead id="t_head">
<tr>
<th>序号</th>
<th>标题</th>
<th>地点</th>
<th>已报名</th>
<th>类别</th>
<th>操作</th>
</tr>
</thead>
<tbody id="t_body">
<!-- ajax填充列表 -->
</tbody>
</table>
<button id="firstPage">首页</button>
<button id="previous">上一页</button>
<button id="next">下一页</button>
<button id="last">尾页</button>
标签:
ajax,实现翻页,无刷新

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“Jquery:ajax实现翻页无刷新功能代码”
暂无“Jquery:ajax实现翻页无刷新功能代码”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。