Ajax分页实例

Posted on 2018-03-14 16:55  神笔码农  阅读(297)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../../crud/bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="../../crud/bootstrap/js/bootstrap.min.js"></script>
<link href="../../crud/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<br />
<div>
    请输入名称：<input type="text" id="name" />
    <input type="button" value="查询" id="btn" />
</div>
<br />

<table class="table table-striped">
  <caption>中国省市区信息</caption>
  <thead>
    <tr>
      <th>地区代号</th>
      <th>地区名称</th>
      <th>父级代号</th>
    </tr>
  </thead>
  <tbody id="nr">
    
  </tbody>
</table>

<div style="width:30%; margin:0px auto">
    <ul class="pagination" id="pagelist">
       <!-- <li><a>&laquo;</a></li>
        <li class="active"><a>1</a></li>
        <li class="disabled"><a>2</a></li>
        <li><a>3</a></li>
        <li><a>4</a></li>
        <li><a>5</a></li>
        <li><a>&raquo;</a></li>-->
    </ul>
</div>

</body>
<script type="text/javascript">
var pcount = 12; //每页显示多少条
var page = 1; //当前页

//加载数据
loadData();
//加载分页列表
loadPageList();

//查询
$("#btn").click(function(){
    page = 1;
    //加载数据
    loadData();
    //加载分页列表
    loadPageList();
})

//加载数据的函数
function loadData(){
    var name = $("#name").val();
    $.ajax({
        url:"load.php",
        data:{page:page,pcount:pcount,name:name},
        type:"POST",
        dataType:"JSON",
        success: function(data){
            var str = "";
            /*for(var i=0;i<data.length;i++){
                str += "<tr><td>"+data[i].AreaCode+"</td><td>"+data[i].AreaName+"</td><td>"+data[i].ParentAreaCode+"</td></tr>";
            }*/
            
            for(var k in data){
                str += "<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
            }
            
            $("#nr").html(str);
        }
    });
}

//加载分页列表
function loadPageList(){
    var str = "";
    //加载上一页
    str += "<li><a id='prev'>&laquo;</a></li>";
    //加载列表
    
    //往左找2个  10
    for(var i=page-2;i<page;i++){
        var p = i;
        if(p>0){
            str += "<li><a class='plist'>"+p+"</a></li>";
        }
    }
    //当前页
    str += "<li class='active'><a>"+page+"</a></li>";
    
    //往右找2个
    for(var i=page;i<=page+1;i++){
        var p = i+1;
        var zys = yeShu();
        if(p<=zys){
            str += "<li><a class='plist'>"+p+"</a></li>";
        }
    }
    //加载下一页
    str += "<li><a id='next'>&raquo;</a></li>";
    
    $("#pagelist").html(str);
    
    //给分页列表加事件
    jiaShiJian();
}


//获取总页数的方法
function yeShu(){
    var ts = 0; //总条数
    var name = $("#name").val();
    $.ajax({
        async:false,
        data:{name:name},
        type:"POST",
        url:"shuliang.php",
        dataType:"TEXT",
        success: function(data){
            ts = data;
        }
    });
    
    var zys = Math.ceil(ts/pcount);
    return zys;
}

//给分页列表加事件的方法
function jiaShiJian(){
    //给上一页加事件
    $("#prev").click(function(){
        //当前页减一
        if(page>1){
            page--;
            //重新加载数据
            loadData();
            //重新加载分页列表
            loadPageList();
        }else{
            alert("当前已经是第一页了！");
        }
    })
    //给下一页加事件
    $("#next").click(function(){
        //当前页加一
        var zsy = yeShu();
        if(page<zsy){
            page++;
            //重新加载数据
            loadData();
            //重新加载分页列表
            loadPageList();
        }else{
            alert("当前已经是最后一页了！");
        }
    })
    //给中间的列表加事件
    $(".plist").click(function(){
        //换当前页
        page = parseInt($(this).text());
        //重新加载数据
        loadData();
        //重新加载分页列表
        loadPageList();
    })
}

</script>
</html>