Posted in Javascript onAugust 05, 2013
不多说,直接贴代码:
下面是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>
Jquery:ajax实现翻页无刷新功能代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@