zoukankan      html  css  js  c++  java
  • 分页显示样式参考

    #fy_shang:hover{ cursor:pointer}
    #fy_xia:hover{ cursor:pointer}
    .fy_zhong:hover{ cursor:pointer}
    //进入页面或者刷新页面后显示
    $(document).ready(function(e) {
            JiaZai();
            var zys = 0;
            //页面加载数据
            })
            function JiaZai()
            {        
                var n = $("#fy_n").val();//页数显示框里面显示的页数
                $.ajax({
                url:"../chuli/xianshichuli.php",
                data:{n:n},
                type:"POST",
                dataType:"JSON",
                success: function(data){
                    var s ="";                        
                    for(var i in data)
                    {
                        s = s+"<tr><td class='lie'><input type='checkbox' value='"+data[i].uid+"' class='qx' /></td><td class='lie'>"+data[i].uid+"</td><td class='lie'>"+data[i].pwd+"</td><td class='lie'>"+data[i].name+"</td><td class='lie'>"+data[i].sex+"</td><td class='lie'>"+data[i].class+"</td><td class='lie'>"+data[i].gongsi+"</td><td class='lie'>"+data[i].boke+"</td><td class='lie'><button class='btn btn-primary btn-lg bianji' data-toggle='modal' data-target='#myModal' code='"+data[i].uid+"'>编辑</button></td><td class='lie'><a href='../chuli/delete.php?code="+data[i].uid+"' onclick="return confirm('确定删除吗?')"><button class='btn btn-primary btn-lg' data-target='#myModal'>删除</button></a></td></tr>";    
                    }
                    $("#tb").html(s);//把拼接好的字符串放到要显示的div里面。
                    
                    $(".bianji").click(function(){
                            var code = $(this).attr("code");
                            $.ajax({
                            url:"../chuli/bianjichuli.php",
                            data:{code:code},
                            type:"POST",
                            dataType:"TEXT",
                            success: function(data){
                                var lie = data.split("^");
                                var str = "";
                                str = str+"<form action='../chuli/updatechuli.php' method='post'><div class='input-group'><span class='input-group-addon'>用户名</span><input type='text' class='form-control' value='"+lie[0]+"' name='uid' /></div></br><div class='input-group'><span class='input-group-addon'>密&nbsp;&nbsp;&nbsp;码</span><input type='text' class='form-control' value='"+lie[1]+"' name='pwd' /></div></br><div class='input-group'><span class='input-group-addon'>姓&nbsp;&nbsp;&nbsp;名</span><input type='text' class='form-control' value='"+lie[2]+"' name='name' /></div></br><div class='input-group'><span class='input-group-addon'>性&nbsp;&nbsp;&nbsp;别</span><input type='text' class='form-control' value='"+lie[3]+"' name='sex' /></div></br><div class='input-group'><span class='input-group-addon'>班&nbsp;&nbsp;&nbsp;级</span><input type='text' class='form-control' value='"+lie[4]+"' name='class' /></div></br><div class='input-group'><span class='input-group-addon'>公&nbsp;&nbsp;&nbsp;司</span><input type='text' class='form-control' value='"+lie[5]+"' name='gongsi' /></div></br><div class='input-group'><span class='input-group-addon'>博&nbsp;&nbsp;&nbsp;客</span><input type='text' class='form-control' value='"+lie[6]+"' name='boke' /></div></br><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button><button type='submit' class='btn btn-primary'>提交修改</button></div></form>";
                                $("#nr").html(str);
                                }
                            })
                        })     
                                                                        
                }
            });
                            
            //获取分页数(列表)
            $.ajax({
                url:"../chuli/xianshichuli2.php",
                data:{},
                type:"POST",
                dataType:"TEXT",
                success: function(data){ 
                    //总页数
                    var ys = Math.ceil(data/10); 
                    zys = ys;
                    
                    var s = "<li><a id='fy_shang'>&laquo;</a></li>";
                    var dangqian = $("#fy_n").val(); //当前页数   
                    for(var i=dangqian-2;i<=dangqian+2;i++)
                    {
                        if(i>0 && i<=ys)
                        {
                            if(dangqian==i)
                            {
                                s+="<li class='active'><a class='fy_zhong'>"+i+"</a></li>";
                            }
                            else
                            {
                                s+="<li><a class='fy_zhong'>"+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();
            })
              $(".fy_zhong").click(function(){
              var n = $(this).text();
              $("#fy_n").val(n);
        
            //加载数据
            JiaZai();
         
            })
          }        
        
        }
  • 相关阅读:
    java导出pdf格式文档
    本地文件夹选择框
    将文件解除占用
    Windows 进入上帝模式窗口
    Windows 10 系统获取密钥方法
    CentOS7 systemctl 命令
    一键立即息屏
    定时关闭程序
    CentOS 7 FTP的安装与配置
    SQL基础
  • 原文地址:https://www.cnblogs.com/Strive-count/p/6421362.html
Copyright © 2011-2022 走看看