PHP数据库实操：无刷新分页和编辑删除功能 - PHP学习

首页 > 博客列表 > PHP数据库实操：无刷新分页和编辑删除功能

博主信息

博文 145

粉丝 7

访问量 202170

专题推荐

更多>

一、无刷新分页

1.实现原理：前端通过ajax请求获取服务器数据，再由JS把数据组成html渲染到页面中
2.服务器php代码（获取分页数据信息）

<?php
require('connection.php');//链接数据库操作
//获取当前数据记录总条数
$sql="select count(*) as 'nums' from v_staffs;";
$stmt=$pdo->prepare($sql);
$stmt->execute();
$result=$stmt->fetch();
// var_dump($result);
$nums=$result['nums'];
$num=10;//每页显示记录数
$pages=ceil($nums/$num);//获取总页数
// echo $pages;
// 获取当前分页的数据记录信息
$sql='select * from v_staffs limit ?,?;';
// echo $_GET['p'];
$page=$_GET['p']??1;//页码数
$start=($page-1)*$num;//通过页码数获取起始记录数
$stmt=$pdo->prepare($sql);
$stmt->bindParam(1,$start,PDO::PARAM_INT);
$stmt->bindParam(2,$num,PDO::PARAM_INT);
$stmt->execute();
// echo print_r($stmt->fetchAll(),true);
$rows=$stmt->fetchAll(); 
$res=['data'=>$rows,'pages'=>$pages];
echo json_encode($res);
// return json_encode($rows);

2.前端js获取数据请求和页面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工信息表(无刷新分页)</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <main>
        <table border="1" cellpadding='3' cellspacing='0'>
            <caption>员工信息表</caption>
            <tr id="title">
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>工资</th>
                <th>邮箱</th>
                <th>职位</th>
                <th>负责区域</th>
                <th>操作</th>
            </tr>
        </table>
        <!--页码部分 -->
        <div id='page'>
        </div>
    </main>
</body>
<script>
    //页面主体内容获取和生成函数
    function getrows(data) {
    //如果页面已经记录信息需要移除
        if ($($("table>tbody")[0]).children().length > 1) {
            $($("table>tbody")[0]).children().remove("tr:not(#title)");
        };
        //生成html内容
        var content = "";
        data.forEach((item) => {
            content += `<tr>
                    <td>${item["id"]}</td>
                    <td>${item["name"]}</td>
                    <td>${item["age"]}</td>
                    <td>${item["gender"]}</td>
                    <td>${item["salary"]}</td>
                    <td>${item["email"]}</td>
                    <td>${item["postion"]}</td>
                    <td>${item["area"]}</td>
                    <td><button><a href="http://php.edu/test/edit.php?id=${item["id"]}" target="_blank">编辑</a></button><button class="delete" data-index="${item["id"]}">删除</button></td>
                    </tr>
                    `;
        });
        //渲染到页面中取
        $('#title').after(content);
    }
//生成分条条函数
    function getpage(pages) {
    //如果没有分页条则生成
        if ($("#page").children().length == 0) {
            var plink = "<span>首页</span><span>&lt</span>";
            for (var i = 1; i <= pages; i++) {
                plink += `<span>${i}</span>`;
            }
            plink += "<span>&gt;</span><span>尾页</span>"
                // console.log(plink);
            $("#page").append(plink);
        }
        // console.log($("#page").children().length);
    }
//ajax获取数据信息函数
    function getdata(page) {
        $.ajax({
            type: 'GET',
            url: 'http://php.edu/test/staffs_api.php',
            data: {
                p: page
            },
            dataType: 'json',
            success: function(res) {
                // console.log(res);
                var data = res['data'];
                var pages = res['pages'];
                // console.log(data, pages);
                //调用函数生成页面信息
                getrows(data);
                getpage(pages);
            }
        });
    }
//首次打开页面默认获取首页数据信息并展示
    window.onload = function() {
        getdata(1);
    }
//通过委托事件实现翻页（上一页下一页功能没有实现）
    $('#page').click(function(ev) {
        // console.log(ev.target.textContent, ev.currentTarget);
        var currentpage = ev.target.textContent;
        switch (currentpage) {
            case "首页":
                getdata(1);
                break;
            case "尾页":
                var count = $(ev.currentTarget).children().length - 4;
                getdata(count);
                break;
            case "<":
                console.log('上一页');
                break;
            case ">":
                console.log("下一页");
                break;
            default:
                getdata(currentpage);
        }
    });
    //删除数据功能，通过ajaxComplete()函数来获取动态生成的信息
    $(document).ajaxComplete(function() {
        // console.log($('.delete'));
        $('.delete').click(function(ev) {
            var id = $(ev.target).data("index");
            // console.log(id);
            if (window.confirm("确定删除吗？")) {
                $.ajax({
                    type: 'GET',
                    url: 'http://php.edu/test/delete.php',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(res) {
                        if (res[0] > 0) {
                            return alert("删除成功");
                        } else {
                            return alert("删除失败");
                        }
                    }
                });
                window.location.reload();
            } else {
                return false;
            }
        });
    });
</script>
<style>
    main {
        width: 1000px;
        margin: 10px auto;
    }
    table {
        width: 1000px;
    }
    #page {
        margin-top: 10px;
        width: 1000px;
        display: flex;
        justify-content: space-around;
    }
    #page>span {
        width: 46px;
        height: 20px;
        background-color: lightgray;
        /* border: 1px solid black; */
        text-align: center;
        color: whitesmoke;
        line-height: 20px;
    }
    #page>span:hover {
        cursor: pointer;
        background-color: white;
        color: red;
    }
    th,
    td {
        text-align: center;
    }
</style>
</html>

二、编辑功能

（一）功能实现原理
1.通过分页的编辑按钮获取要编辑数据记录的id,然后通过编辑页面把要编辑的记录显示出来，
2.通过ajax获取新的数据，通过id,更新信息
（二）实现代码
1.前端代码

<?php
include('connection.php');
$sql="select * from v_staffs where id=:id;";
$stmt=$pdo->prepare($sql);
$id=$_GET["id"];
$stmt->bindParam(':id',$id,PDO::PARAM_INT);
$stmt->execute();
// $stmt->debugDumpParams();
$row=$stmt->fetch();
// var_dump($row);
// exit();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>员工信息修改</title>
</head>
<body>
<body>
    <table border="1" cellpadding='3' cellspacing='0'>
    <caption>修改员工信息</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>工资</th>
        <th>邮箱</th>
    </tr>
    <tr>
        <td id="id"><?= $row["id"] ?></td>
        <td><input type="text" name="name" value="<?= $row["name"] ?>"></td>
        <td><input type="text" name="age" value="<?= $row["age"] ?>"></td>
        <td><input type="text" name="gender" value="<?= $row["gender"] ?>"></td>
        <td><input type="text" name="salary" value="<?= $row["salary"] ?>"></td>
        <td><input type="text" name="email" value="<?= $row["email"] ?>"></td>
    </tr>
    </table>
    <button id="update">提交</button>
</body>
<script>
    $("#update").click(function(){
        $.ajax({
            type: 'POST',
            url: 'http://php.edu/test/update.php',
            data: {
            //获取新数据
                name: $("[name='name']").val(),
                age:$("[name='age']").val(),
                gender:$("[name='gender']").val(),
                salary:$("[name='salary']").val(),
                email:$("[name='email']").val(),
                id:$("#id").text()
            },
            dataType: 'json',
            success: function(res) {
            //确认更新成功
                alert(res[1]);
                window.close();//关闭窗口
            }
        });
    });
</script>
</html>

2.后端代码

<?php
include('connection.php');
$sql="update staffs set name=?,age=?,gender=?,salary=?,email=? where id=?;";
$stmt=$pdo->prepare($sql);
$stmt->execute([$_POST['name'],$_POST["age"],$_POST["gender"],$_POST["salary"],$_POST["email"],$_POST['id']]);
// $stmt->debugDumpParams();
if($stmt->rowCount()>0){
    echo json_encode([$stmt->rowCount(),"更新成功"]);
}else{
    echo json_encode([0,"更新失败"]);
}

运行效果图

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19