使用ajax来做分页

limit:这个的功能是限制php显示数据库内容的条数以及从数据库中的第几条开始显示

 


<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>

<body>
<h1>ajax分页</h1>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>代号</td>
        <td>名称</td>
    </tr>
    <tbody id="shuju">
    
    </tbody>
</table>

<div id="xinxi"></div>

上一页   12345  下一页


</body>
<script type="text/javascript">

//代表当前页
var page = 1;
//每页显示几条
var num = 5;

//加载数据
Load();

//加载分页列表
LoadFenYe();


//这个方法怎么做?
function Load()
{
    //根据当前页和每页显示几条数据这两个数据去加载
    //如果当前页是1就加载第一页的,如果当前页是2就加载第二页的
    //所以就根据这两个参数去加载,使用ajax来调处理页面的
    //时候要注意要把这两个参数传过去,也就是根据这两个参数过来查数据。
    $.ajax({
        url:"chuli.fenye.php",
        data:{page:page,num:num},
        type:"POST",
        dataType:"JSON",
        success:function(data){
            var str="";
            //遍历JSON数据
            for(var k in data)
            {
                data[k].Code;
                str = str + "<tr><td>"+data[k].Code+"</td><td>"+data[k].Name+"</td></tr>"
            }
            $("#shuju").html(str);
        }
    });
}

//加载分页信息
function LoadFenYe()
{    
    //用来存储所有分页信息的代码
    var s = "";
    
    //加载上一页
    s = "<span id='prev'>上一页</span>";
    
    //加载列表
    var zts = 0;
    //查找总共多少条数据
    $.ajax({
        async:false,
        url:"zongtiaoshu.php",
        dataType:"TEXT",
        success: function(data){
            zts = data;
        }
    });
    
    //知道了总条数求总页数  Math.ceil();是对小数向上取整数。
    var zys = Math.ceil(zts/num);
    
    for( var i=page-2;i<page+3;i++)
    {
        
    }
    
    //加载下一页
    s = s+"<span id='next'>下一页</span>";
    
    
    
    
    
} 



</script>
</html>

 

 
posted @ 2017-07-21 09:53  mengqiaini  阅读(240)  评论(0编辑  收藏  举报