zoukankan html css js c++ java

6.24 数据库实时编辑，分页

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="../public/bootstrap.min.css"/>
    <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../public/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style type="text/css">
        #title{
            100%;
            height: 50px;
            line-height: 50px;
            font-size: 19px;
            font-weight: 800;
            background:rgba(0,0,0,0.7);
            color:floralwhite;
            
        }
        #left{
            20%;
            height: 550px;
            background-color: #E0A800;
            float: left;
        }
        #right{
             80%;
            height: 550px;
            float: left;
        }
        .cd{
            width:150px;
            height: 30px;
            background-color: #E9C384;
            text-align: center;
            line-height: 30px;
            margin-left: 19%;
            color: white;
            border-radius: 5px;
        }
        .nr{
            width:150px;
            height: 30px;
            background-color:#000000;
            text-align: center;
            line-height: 30px;
            color: white;
            margin-left: 19%;
            border-radius: 5px;
        }
        
    </style>
</head>
<body>
    <div id="title">
        <a style="margin-left: 10px;">改图网后台管理系统</a>
    </div>
    <div id="left">
        <div class="cd"style="margin-top: 20px;">菜单1</div>
        <div class="menu">
            <div class="nr">内容1</div>
             <div class="nr">内容2</div>    
             <div class="nr">内容3</div> 
        </div>
         <div class="cd">菜单2</div>
         <div class="menu">
            <div class="nr">内容1</div>
             <div class="nr">内容2</div>    
             <div class="nr">内容3</div> 
        </div>
         <div class="cd">菜单3</div>
         <div class="menu">
            <div class="nr">内容1</div>
             <div class="nr">内容2</div>    
             <div class="nr">内容3</div> 
      </div>
    </div>
    <div id="right">
        <button onclick="cha()">查询</button><input type="text" id="cha"/>
        <table border="1" cellspacing="0" cellpadding="0" class="table">
        
        </table>
        <ul class="pagination pagination-sm">
            
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    var page = 1;
    var tj = "";//全局变量可以在函数里面直接拿来用
    $(document).ready(function(){
        jiazai();
    })
    $(".menu").hide();
        $(".cd").click(function(){
        $(this).next().slideToggle();
    })
    //全选反选
    
   /* function qu(t){
        var inpp = document.getElementsByClassName("inpp");
        for(var i=0;i<inpp.length;i++){
            if(t.checked){
                inpp[i].checked=true;
            }else{
                inpp[i].checked=false;
            }
        }
    }*/
    function cha(){
       tj = $("#cha").val();
       jiazai();
       loadfenye();
    }    
    function jiazai(){
        var str="";
        $.ajax({
            type:"post",
            url:"wbkcl.php",
            async:true,
            data:{
                type:"chaxun",
                page:page,
                tj:tj
            },
            dataType:"json",
            success:function(data){
                str +="<tr><td><input id='inp1' type='checkbox'/></td><td>序号</td><td>学号</td><td>姓名</td><td>性别</td><td>生日</td>"
                +"<td>班级</td><td><button type='button' class='btn' onclick='tianjia()'>添加</button></td></tr>";
                for(var i=0;i<data.length;i++){
                    str +="<tr>";
                    str +="<td><input class='inpp' type='checkbox'/></td>";
                    for(var j=0;j<data[i].length;j++){
                        str +="<td>"+data[i][j]+"</td>"
                    }
                    str +="<td><button type='button' class='btn' onclick='bianji(this)'>编辑</button>"
                    +"<button type='button' class='btn' onclick='deleteData("+data[i][0]+")'>删除</button></td>"
                          
                    str +="</tr>";
                }
                $("table").html(str);
                changecolor();
                loadfenye();
                quanxuan(); 
            }
        });    
    }
    function changecolor(){
        $("tr:even").css("background","sandybrown");
        $("tr:odd").css("background","deepskyblue");
        $("td").css({"color":"white","width":"100px"});
        $("input").css("width","100px");
    }
    function tianjia(){
        var str ="<tr><td><input type='checkbox'/></td><td><input type='text'/></td><td><input type='text'/></td><td><input type='text'/></td><td><input type='text'/></td><td><input type='text'/></td><td>"
        +"<input type='text'/></td><td><button type='button' class='btn baocun'>保存</button><button type='button' class='btn quxiao'>取消</button></td></tr>";
        $("table").append(str);
        changecolor();
        $(".quxiao").click(function(){
            $(this).parent().parent().remove();
        })
        $(".baocun").click(function(){
            var hang = $(this).parent().parent();
            var inputlist = hang.find("input");//找到所有的input
            var input0 = inputlist.eq(0).val();
            var input1 = inputlist.eq(1).val();
            var input2 = inputlist.eq(2).val();
            var input3 = inputlist.eq(3).val();
            var input4 = inputlist.eq(4).val();
            var input5 = inputlist.eq(5).val();
            $.ajax({
                type:"post",
                url:"wbkcl.php",
                async:true,
                data:{
                    type:"tianjia",
                    input0:input0,
                    input1:input1,
                    input2:input2,
                    input3:input3,
                    input4:input4,
                    input5:input5
                },
                dataType:"text",
                success:function(data){
                    if(data.trim() =="ok"){
                        alert("添加成功");
                        jiazai();
                    }
                }
            });
        })    
    }
    function deleteData(xh){
        $.ajax({
                type:"post",
                url:"wbkcl.php",
                async:true,
                data:{
                    type:"delete",
                    xh:xh
                },
                dataType:"text",
                success:function(data){
                    if(data.trim() =="ok"){
                        alert("删除成功");
                        jiazai();
                    }
                }
            });
    }
    function bianji(t){
        var hang = $(t).parent().parent();
        var tdlist = hang.find("td");//找到所有的td
        var tdlist0 = tdlist.eq(0).text();
        var tdlist1 = tdlist.eq(1).text();
        var tdlist2 = tdlist.eq(2).text();
        var tdlist3 = tdlist.eq(3).text();
        var tdlist4 = tdlist.eq(4).text();
        var tdlist5 = tdlist.eq(5).text();
        var tdlist6 = tdlist.eq(6).text();
        var str ="<tr><td><input type='checkbox' /></td><td><input type='text' value='"+tdlist1+"'/></td><td><input type='text' value='"+tdlist2+"'/></td>"
        +"<td><input type='text' value='"+tdlist3+"'/></td><td><input type='text' value='"+tdlist4+"'/></td>"
        +"<td><input type='text' value='"+tdlist5+"'/></td><td><input type='text' value='"+tdlist6+"'/></td>"
        +"<td><button type='button' class='btn baocun'>保存</button><button type='button' class='btn quxiao'>取消</button></td></tr>";
        hang.replaceWith(str);//替换
        changecolor();
        $(".quxiao").click(function(){
            jiazai();
        })
        $(".baocun").click(function(){
            //var bs = $(this).attr("bs");
            var hang = $(this).parent().parent();
            var inputlist = hang.find("input");//找到所有的input
            var input1 = inputlist.eq(1).val();
            var input2 = inputlist.eq(2).val();
            var input3 = inputlist.eq(3).val();
            var input4 = inputlist.eq(4).val();
            var input5 = inputlist.eq(5).val();
            var input6 = inputlist.eq(6).val();
            $.ajax({
                type:"post",
                url:"wbkcl.php",
                async:true,
                data:{
                    type:"xiugai",
                    input1:input1,
                    input2:input2,
                    input3:input3,
                    input4:input4,
                    input5:input5,
                    input6:input6
                    //bs : bs
                },
                dataType:"text",
                success:function(data){
                    if(data.trim() =="ok"){
                        alert("修改成功");
                        jiazai();
                    }
                }
            });
        })
    }
    
    function loadfenye(){
        var str = "";
        var minys = 1;
        var maxys = 1;
        
        //总页数
        $.ajax({
            type:"post",
            url:"wbkcl.php",
            async:false,//同步执行 会等待后台结果返回，方法才会继续执行下一句
            data:{
                type:"chatotal",
                tj:tj
            },
            dataType:"text",
            success:function(data){
                maxys = data;
            }
        });
        str += "<li><a>总共："+maxys+"页</a></li>";
        str += "<li class='page-item prev'><a class='page-link'>Previous</a></li>";
        for(var i=0;i<=maxys;i++){//控制点击后显示的两边的页数var i =page-2;i<=page+2
            if(i>=minys && i<=maxys){
                if(i==page){
                    str += "<li class='page-item dangqian' style='color:red;' bs='"+i+"'><a class='page-link'>"+i+"</a></li>";        
                }else{
                    str += "<li class='page-item list' bs='"+i+"'><a class='page-link'>"+i+"</a></li>";
                }
            }
        }
    
        str += "<li class='page-item next'><a class='page-link'>Next</a></li>";
    $(".pagination").html(str);
    
    //给上一页加点击
    $(".prev").click(function(){
        page = page-1;
        if(page<1){
            page=1;
        }
        jiazai();//加载数据
        loadfenye();//加载分页信息
    })
    //给下一页加点击
    $(".next").click(function(){
        page = page+1;
        if(page>maxys){
            page=maxys;
        }
        jiazai();//加载数据
        loadfenye();//加载分页信息
    })
    //给中间的列表加事件
    $(".list").click(function(){
        page = parseInt($(this).attr("bs"));//返回整数
        jiazai();//加载数据
        loadfenye();//加载分页信息
    })
}

function quanxuan(){
    $("#inp1").click(function(){
                        //console.log($(this).is(":checked"));//jq判断多选框的选中
                            if($(this).is("input:checked")){ 
                                $(".inpp").each(function(){   
                                      $(this).attr("checked", true);    
                                });  
                            }else{     
                                $(".inpp").each(function() {     
                                      $(this).attr("checked", false);    
                                });  
                            }    
                        });
}
</script>

<?php
    $conn = new mysqli("localhost","root","","ceshi");
    $conn->connect_error?die():"";
    $type = $_POST['type'];
    switch($type){
        case "chatotal":
        $tj = $_POST['tj'];
        $sql = "select count(*) from student where sname like '%{$tj}%'";
        $result = $conn->query($sql);
        $attr = $result->fetch_row();
        echo ceil($attr[0]/5);//向上舍入为最接近的整数。4.5取5
        break;
        
        case "chaxun":
        $page = $_POST['page'];
        $tj = $_POST['tj'];
        $page = ($page-1)*5;//跳过几条显示几条
        $sql = "select * from student where sname like '%{$tj}%' limit $page,5";
        $result = $conn->query($sql);
        $attr = $result->fetch_all();
        echo json_encode($attr);
        break;
       case "tianjia":
       $input0 = $_POST['input0'];
       $input1 = $_POST['input1'];
       $input2 = $_POST['input2'];
       $input3 = $_POST['input3'];
       $input4 = $_POST['input4'];
       $input5 = $_POST['input5'];
       $sql = "insert into student values('{$input0}','{$input1}','{$input2}','{$input3}','{$input4}','{$input5}')";
       if($result=$conn->query($sql)){
           echo "ok";    
       }else{
           echo "no";
       };
       break;
       case "delete":
       $xh = $_POST['xh'];
       $sql = "delete from student where id='{$xh}'";
       if($result=$conn->query($sql)){
           echo "ok";    
       }else{
           echo "no";
       };
       break;
       case "xiugai":
       $input1 = $_POST['input1'];
       $input2 = $_POST['input2'];
       $input3 = $_POST['input3'];
       $input4 = $_POST['input4'];
       $input5 = $_POST['input5'];
       $input6 = $_POST['input6'];
       //$bs = $_POST['bs'];
       $sql = "update student set sname ='{$input3}',ssex ='{$input4}',sbirthday ='{$input5}',class ='{$input6}' where id ='{$input1}'";
       if($result=$conn->query($sql)){
           echo "ok";    
       }else{
           echo "no";
       };
       break;
    }
    
?>

查看全文

相关阅读:
第一次博客园作业
 弹性布局/流动式布局
 元素在网页或视口上位置的相关问题求解
 element
给body设置高度
 盒模型宽高的获取和设置
 选择器
 变量、作用域和内存问题
 js之捕捉冒泡和事件委托
 transition transform animate的使用

原文地址：https://www.cnblogs.com/sunhao1987/p/9221527.html