首页 > Web开发 > 详细

ajax实现的无刷新分页代码实例

时间：2015-12-31 12:27:48 阅读：172 评论：0 收藏：0 [点我收藏+]

标签：

一.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">

</tbody>
</table>
<button id="firstPage">首页</button>
<button id="previous">上一页</button>
<button id="next">下一页</button>

<button id="last">尾页</button>

二.ajax代码部分:

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();
});
});

ajax实现的无刷新分页代码实例

标签：

原文地址：http://www.cnblogs.com/mmx-jiayou/p/5091041.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！