zoukankan      html  css  js  c++  java
  • $.ajax 分页

    <!--zhongtu-->
    <div id="ztp">
         <div  id="ztpian">
         </div>
    </div>
    <!--内容-->
    <div id="nr"><div id="xian">
         </div>
    </div>
    </div>
    <center >
                    <div id="fyh" style=" 300px; height:50px; font-size:16px; position:relative; margin-left:100px">
                    <ul class="pagination" id="fy_list">
                       
                    </ul>
                    </div>
                    <input type="hidden" value="1" id="fy_n" />
                    </center>
    $(document).ready(function(e){
        
        dengluzt();
        //确定总页数的变量
        var zys = 0;
        //查询数据
        $("#fy_n").val(1);
          $(".lei").click(function(){
            bs = $(this).attr("bs");
            
            JiaZai(bs);
            });
     
    });
    //加载数据方法
        function JiaZai(bs)
        {
            var n = $("#fy_n").val();
            bs=bs;
            $.ajax({
                    url:"ffffffchuli.php",
                    data:{bs:bs,n:n, tp:1},
                    type:"POST",
                    dataType:"JSON",
                    success: function(data){
                        var strs = "";
                        for(var k in data)
                        {  
                            
                            strs=strs+"<div ><div style='background-image:url("+data[k].image+"); 314px; height:314px;overflow:hidden;background-position:center; float:left; margin-left:28px; margin-bottom:20px ;border-radius:12px ;'><div id='dise'></div>&nbsp;<div id='kkkk'><a class='heng'  href="guankan.php?bt='"+data[k].code+"'">&nbsp;<span class='glyphicon glyphicon-eye-open'>可观看</span></a><a style='color:#FFF'>|</a><a class='theng' href="guankan.php?bt='"+data[k].code+"'"><span class='glyphicon glyphicon-save'>可下载</span></a></div></div>"
                        }
                        
                            
                        $("#xian").html(strs);}
                });
            //获取分页数(列表)
            $.ajax({
                    url:"ffffffchuli.php",
                    data:{bs:bs,tp:2},
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data){
                            //总页数
                            var ys = Math.ceil(data/6); 
                            zys = ys;
                            
                            var s ="";
                            //var s = "<li><a id='fy_shang'>&laquo;</a></li>";
                            var dangqian = parseInt($("#fy_n").val()); //当前页数
                            
                                    for(var i=dangqian-2;i<=dangqian+2;i++){
                                        if(i>0 && i<=zys)
                                        {
                                            if(dangqian==i)
                                            {
                                            s+="<li  class='active fy_zhong' style='font-size:16px; 20px; height:20px; float:left; text-align:center; vertical-align:middle; line-height:50px; list-style-type:none; margin:10px'><a>"+i+"</a></li>";
                                            }
                                            else
                                            {
                                                s+="<li class='fy_zhong' style='font-size:16px; 20px; height:20px; float:left; text-align:center; vertical-align:middle; line-height:50px; list-style-type:none; margin:10px'><a>"+i+"</a></li>"
                                            }
                                        }
                                    }
                                
                            //s += "<li><a id='fy_xia'>&raquo;</a></li>";
                        
                            $("#fy_list").html(s);
                            
                               //给分页列表加事件
                            JiaShiJian();
                        }
                    })
        }
        //给分页列表加事件的方法
        function JiaShiJian()
        {
            $("#fy_shang").click(function(){
                
                    var n = $("#fy_n").val(); 
                    if(n>1)
                    {
                        n--;
                    }
                    else
                    {
                        n=1;
                    }
                    $("#fy_n").val(n);
                    
                    //加载数据
                    JiaZai();
                })
            $("#fy_xia").click(function(){
                    var n = $("#fy_n").val(); 
                    if(n<zys)
                    {
                        n++;
                    }
                    else
                    {
                        n=zys;
                    }
                    $("#fy_n").val(n);
                    
                    //加载数据
                    JiaZai(bs);
                })
            $(".fy_zhong").click(function(){
                    var n = $(this).text();
                    $("#fy_n").val(n);
                    
                    //加载数据
                    JiaZai(bs);
                })
        }
    <?php
     session_start();
    include("dbda.php");
    $db = new DBDA();
    $tp = $_POST["tp"];
    
    if(!empty($_SESSION["uid"])){
        
        $uid=$_SESSION["uid"];
        }
    
    switch($tp){
        case 1:
            $n = $_POST["n"];
            $tg = ($n-1)*6;
            $bs = $_POST["bs"];
            $sqlsj = "select * from xinxi where class='{$bs}' limit {$tg},6 ";
            
            echo $db->JsonQuery($sqlsj);
            
            break;
        case 2:
            $bs = $_POST["bs"];
            $sql = "select count(*) from xinxi where class='{$bs}'";
            $zs = $db->StrQuery($sql);
            echo $zs;
            break;
    
    
  • 相关阅读:
    java 多线程
    数据结构与算法-----快速排序
    JS 强制类型转化
    VS Code 编辑器
    MySQL8数据库安装配置和启动
    listview更改选中时item背景色(转)
    Android下用程序的方法为ListView设置分割线Divider样式
    listview android:cacheColorHint,android:listSelector属性作用
    Android手动显示和隐藏软键盘
    android调试debug快捷键
  • 原文地址:https://www.cnblogs.com/benpaodegegen/p/6108392.html
Copyright © 2011-2022 走看看