member-control_panel.html

<!-- 商品管理 -->
<!-- 和20240201-SPA.html有關係 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>會員管理系統</title>
    <link rel="shortcut icon" href="images/icon/icon.ico" type="images/x-icon"><!-- icon更換 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/myall.css">
</head>

<body>
    <div class="container pt-5">
        <table class="table table-bordered table-hover table-sm border-success table-rwd">
            <caption class="text-end">會員列表</caption>
            <!-- table-dark : 背景為黑色 -->
            <thead class="table-dark">
                <tr>
                    <th>會員編號</th>
                    <th>會員名稱</th>
                    <th>會員信箱</th>
                    <th>註冊時間</th>
                    <th>更新/刪除</th>
                </tr>
            </thead>
            <tbody id="mydata">
                <!-- 這個tr為範例，執行時會全部清空 -->
                <tr>
                    <td>商品編號</td>
                    <td>產品名稱</td>
                    <td>產品價格</td>
                    <td>產品甜度</td>
                    <td>
                        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#updateModal">更新</button>
                        <button class="btn btn-danger">刪除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="container">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center" id="pageList">
                <li class="page-item"><a class="page-link" href="#" onclick="drawTable(0)">1</a></li>
            </ul>
        </nav>
    </div>

    <!-- updateModal，跳出的視窗 -->
    <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-bg-success">
                    <h1 class="modal-title fs-3 fw-900" id="exampleModalLabel">會員更新</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="updateModal_username" class="form-label">帳號</label>
                        <input type="text" class="form-control" disabled id="updateModal_username"
                            name="updateModal_username">
                    </div>
                    <div class="mb-3">
                        <label for="updateModal_email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="updateModal_email" name="updateModal_email">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="updateModal_updata_btn">確認</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        var u_id; //for update
        var newData = [];
        $(function () {
            //讀取會員資料
            $.ajax({
                type: "GET",
                url: "https://hsd325.000webhostapp.com/API/member-Read-api.php",
                async: false,
                dataType: "json",
                success: showdata,
                error: function () {
                    alert("error-member-Read-api.php");
                }
            });

            //#update_btn 更新按鈕監聽
            // $("#mydata #update_btn").click(function () {
            // 上面此監聽方式為比較陽春的，當有發生換頁，從外部抓資料進來，就會監聽不到
            $("body").on("click", "#mydata #update_btn", function () {
                // 上面為較高級的監聽方式    
                // 前一層的層級都可以寫，這裡寫body為最高的層級
                console.log($(this).data("id") + $(this).data("email") + $(this).data("username"));
                u_id = $(this).data("id");
                $("#updateModal_username").val($(this).data("username"));
                $("#updateModal_email").val($(this).data("email"));
            });

            //delete_btn 刪除按鈕監聽
            // $("#mydata #delete_btn").click(function () {
            $("body").on("click", "#mydata #delete_btn", function () {
                if (confirm("確認刪除?")) {
                    console.log($(this).data("id"));
                    //傳遞刪除資料至後端api {"ID":"XX"}
                    var dataJSON = {};
                    dataJSON["ID"] = $(this).data("id");
                    console.log(JSON.stringify(dataJSON));

                    $.ajax({
                        type: "POST",
                        url: "https://hsd325.000webhostapp.com/API/member-Delete-api.php",
                        data: JSON.stringify(dataJSON),
                        dataType: "json",
                        success: showdata_delete,
                        error: function () {
                            alert("error-member-Delete-api.php");
                        }
                    });
                }
            });

            //#updateModal_updata_btn 監聽
            $("#updateModal_updata_btn").click(function () {
                //傳遞更新資料至後端api {"ID":"XX", "Email":"XXXXX"}               
                var dataJSON = {};
                dataJSON["ID"] = u_id;
                dataJSON["Email"] = $("#updateModal_email").val();
                console.log(JSON.stringify(dataJSON));

                $.ajax({
                    type: "POST",
                    url: "https://hsd325.000webhostapp.com/API/member-Update-api.php",
                    data: JSON.stringify(dataJSON),
                    dataType: "json",
                    success: showdata_updata,
                    error: function () {
                        alert("error-member-Update-api.php");
                    }
                });
            });
        });

        // 整理分類要幾個頁碼和繪製頁碼連連結
        function showdata(data) {
            //整理資料儲存為二維陣列，data為資料表抓取的所有資料
            data.data.forEach(function (item, key) {
                // forEach : 像迴圈，顯示每一筆資料，迴圈次數為總共有幾筆資料(key+1)，一筆資料一個迴圈
                // data.data.forEach : 顯示data中data的每一筆資料
                // item : 所有的內容
                // key : 每筆資料的編號(0~9)
                console.log(key);
                if (key % 3 == 0) {
                    newData.push([]);
                    // 上面的資料格式，[1,2,3],[4,5,6],[7,8,9],[10,11,12]
                    // newData.push([]); : 為推了一筆新的資料([])進來
                }
                // page為決定當前要把資料推到第幾筆分頁裡面
                // parseInt(key / 3) : 除出來的結果只會取整數
                var page = parseInt(key / 3);
                // page決定將這筆資料放在第幾筆
                newData[page].push(item); // 將此筆資料推上特定的陣列位置
            });
            // 繪製第一頁分頁的意思，這個在一開始就會執行
            drawTable(0);

            //產生頁碼
            // 清空頁碼連結
            $("#pageList").empty();
            // newData : 已經分類好的資料，他的key就等於要幾頁分頁
            newData.forEach(function (item, key) {
                // key + 1 : 是因為一開始key從0開始算的
                var thisPage = key + 1;
                // drawTable 為下面寫的函數，功能:分頁連結被按時會執行動作，產生頁面內容
                var strHTML = '<li class="page-item"><a class="page-link" href="#" onclick="drawTable(' + key + ')">' + thisPage + '</a></li>';
                $("#pageList").append(strHTML);
            });

            console.log(newData);
        }

        // 分頁連結被按時會執行動作，產生頁面內容
        // drawTable : 函數名字而已，沒有任何意思
        // page代表被按到第幾頁
        function drawTable(page) {
            // 清空
            $("#mydata").empty();
            // newData : 分類好的資料
            // newData[page] : 決定拿取第幾頁的資料
            newData[page].forEach(function (item) {
                var strHTML = '<tr><td>' + item.ID + '</td><td>' + item.Username + '</td><td>' + item.Email + '</td><td>' + item.Created_at + '</td><td><button class="btn btn-success me-2" data-id="' + item.ID + '" data-email="' + item.Email + '" data-username="' + item.Username + '" id="update_btn"  data-bs-toggle="modal" data-bs-target="#updateModal">更新</button><button class="btn btn-danger" id="delete_btn" data-id="' + item.ID + '">刪除</button></td></tr>';
                $("#mydata").append(strHTML);
            });
        }

        function showdata_updata(data) {
            console.log(data);
            if (data.state) {
                // alert(data.message);
                Swal.fire({
                    title: "更新完成!",
                    showDenyButton: false,
                    showCancelButton: false,
                    confirmButtonText: "確認",
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        Swal.fire("Saved!", "", "success");
                        location.href = "member-control_panel.html";
                    } else if (result.isDenied) {
                        Swal.fire("Changes are not saved", "", "info");
                    }
                });
            } else {
                alert(data.message);
            }
        }

        function showdata_delete(data) {
            console.log(data);
            if (data.state) {
                alert(data.message);
                location.href = "member-control_panel.html";
            } else {
                alert(data.message);
            }
        }
    </script>
</body>

</html>