• 使用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>
    
    
    
     
  • 相关阅读:
    SpringMVC自动封装List对象 —— 自定义参数解析器
    fetch封装
    基于jQuery实现简单的js模块化
    CSS实现树形结构 + js加载数据
    java多线程
    JS中AOP的实现和运用
    移动端通过ajax上传图片(文件)并在前台展示——通过H5的FormData对象
    chart.js使用常见问题
    用PHP和Ajax进行前后台数据交互——以用户登录为例
    用JS添加和删除class类名
  • 原文地址:https://www.cnblogs.com/shandayuan/p/7216169.html
Copyright © 2020-2023  润新知