zoukankan      html  css  js  c++  java
  • 分页2

    <div id="nr"><div id="xian">
        </div>
    </div>
    <div id="fenye">
       <div id="fyjz">
       <span id="shang" ><input type="button" value="上一页" /></span><div>
       <span id="xia"><input type="button" value="下一页" /></span><div>
       <span class="ye">当前第:<input type="button" id="dq" value="1" />页</span></div>
       <span  class="ye">总共:<span id="zys">1</span>页</span></div>
       </div>
    </div>
    $(".lei").click(function() {
        var bs= $(this).attr("bs");
        
        FenYe(bs);
        ZYS(6,bs);
        
        $("#shang").click(function(){
                var dq = parseInt($("#dq").val());
                
                if(dq>1)
                {
                    $("#dq").val(dq-1);
                }
                else
                {
                    $("#dq").val(1);
                }
                FenYe(bs);
            })
        
        $("#xia").click(function(){
                var dq = parseInt($("#dq").val());
                if(dq<$("#zys").text())
                {
                    $("#dq").val(dq+1);
                }
                else
                {
                    $("#dq").val($("#zys").text());
                }
                FenYe(bs);
            })    
        
    });
    
    //实现分页的方法
    function FenYe(bs)
    
    {  
       var bs = bs;
       
        var dq = $("#dq").val();
        $.ajax({
            url:"chuli.php",
            data:{page:dq,bs:bs},
            dataType:"JSON",
            type:"GET",
            success: function(data){
                var str = "";
                for(var k in data)
                {  
                    str=str+"<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(str);
                }
            });
        
     }
    
    
    //根据每页几条数据求总页数
    function ZYS(n,bs)
    {   
        var bs = bs;
       
        $.ajax({
            url:"zyschuli.php",
            data:{list:n, bs:bs},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                $("#zys").text(data);
                }
            });
    
    }

    分页处理

    <?php include("DBDA.php"); $db = new DBDA(); $bs=$_GET["bs"]; include("page.class.php"); $sql = "select count(*) from xinxi where class='{$bs}'"; $zs = $db->StrQuery($sql); $page = new Page($zs,6); $sqlsj = "select * from xinxi where class='{$bs}' ".$page->limit; // $sqlsj; echo $db->JsonQuery($sqlsj);
    总页数处理

    <?php include("DBDA.php"); $db = new DBDA(); $bs=$_POST["bs"]; $sql ="select count(*) from xinxi where class='{$bs}'"; $sj = $db->StrQuery($sql); $list = $_POST["list"]; $zys = 0; if($sj%$list==0) { $zys = $sj/$list; } else { $zys = floor($sj/$list) +1; } echo $zys;
  • 相关阅读:
    flowable ui 界面请假流程操作实例
    访谷歌看油管 这里有你想要的!!!
    Termux中使用数据线传输文件
    Vue中使用ECharts图表展示数据
    vue项目使用阿里图标库图标
    linux下使用命令行查看天气预报情况
    在博客或者其他Html页面新增浮动音乐播放器
    Vue实现弹窗拖动放大缩小
    分享一个IDEA 免费注册码分享站点
    远程命令执行之------电脑自动执行页面输入的指令
  • 原文地址:https://www.cnblogs.com/benpaodegegen/p/6108457.html
Copyright © 2011-2022 走看看