ajax实现分页

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
     
    <script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ "></style>
</head>
<body>
<div>
    <input type="text" id="key" />
    <input type="button" value="查询" id="chaxun" />
</div>
<table width="50%" border="1" bordercolordark="0" bordercolorlight="0">
    <tr>
        <td>代号</td>
        <td>名称</td>
        <td>父级代号</td>
    </tr>
    <tbody id="neirong"><!--显示内容-->
             
    </tbody>
</table>
<div id="fenyexinxi">
         
</div>
</body>
<script type="text/javascript">
    var page = 1;//定个变量,当前要显示的页
     
    Load();//加载数据
    Loadfenyexinxi();//加载分页信息
    //查询
    $("#chaxun").click(function(){
        page = 1;
        Load();//加载数据
        Loadfenyexinxi();//加载分页信息
    })
    function Load()
    {
        var key = $("#key").val();//查询条件。用户输入的内容
        $.ajax({
            url:"chuli.php",
            data: {
            page: page,
            key: key
        },//传2个参数一当前页2关键字也就是查询条件
            type:"POST",
            dataType:"JSON",
            success: function(data){//匿名函数
                    var str = "";//这个将来要放表格显示的
                    for(var k in data)//通过K可以获得每一条数据
                    {//加载数据完成
                        str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容,代号、名称父级代号
                    }
                    $("#neirong").html(str);
            }
        });
    }
function Loadfenyexinxi()//分页信息
{
    var str = "";
    var minys = 1;//最小页数
    var maxys = 1;//最大页数
    var key = $("#key").val();//取关键字用于传到zys页面用
     
    //查总页数
    $.ajax({
        async:false,//同步的
        type:"POST",
        url:"fenye.php",
        data:{key:key},
        dataType:"TEXT",
        success:function(d){
                maxys = d;
        }
    });
    str += "<span>总共:"+maxys+"页</span>  ";
    str += "<span id='prev'>上一页</span>";
    //循环做列表,当前页减1,当前页加3
    for(var i=page-2;i<page+3;i++)
    {
        if(i>=minys && i<=maxys)
        {
            if(i==page)
            {
                str += "<span class='dangqian' bs='"+i+"'>"+i+"</span>  ";
            }
            else
            {
                str += "<span class='list' bs='"+i+"'>"+i+"</span>  ";
            }
         
        }
    }
     
    str += "<span id='next'>下一页</span>";
    $("#fenyexinxi").html(str);
    //给上一页添加点击事件
    $("#prev").click(function(){
            page = page-1;
            if(page<1)
            {
                page=1;
            }
            Load();//加载数据
            Loadfenyexinxi();//加载分页信息
        })
    //给下一页加点击事件
    $("#next").click(function(){
            page = page+1;
            if(page>maxys)
            {
                page=maxys;
            }
            Load();//加载数据
            Loadfenyexinxi();//加载分页信息
        })
    //给中间的列表加事件
    $(".list").click(function(){
            page = parseInt($(this).attr("bs"));//字符串变整数parseInt
            Load();//加载数据
            Loadfenyexinxi();//加载分页信息
        })
}
     
</script>
</html>
posted @ 2017-06-23 16:42  谢玉林  阅读(2879)  评论(0编辑  收藏  举报
友情链接:回力鞋 | 中老年高档女装