已刪文
根據你提供的程式碼,我嘗試做一些改進以避免可能導致遞迴調用的問題。請確保你在實際使用之前測試這些改進是否適用於你的情況。
$(document).ready(() => {
  const getToken = localStorage.getItem("token");
  
  // ... 其他程式碼 ...
  // 監聽下拉選單的 change 事件
  $("#exampleFormControlSelect1").change(function() {
    // ... 其他程式碼 ...
    selectedDeviceId = selectedOption.data("device_id").toString();
    sending_data_to_api_log_file_list.device_id = selectedDeviceId;
    // 更新表格
    update_certain_ipc_log_table();
  });
  // 初始化表格
  update_certain_ipc_log_table();
  // 監控變更
  function checkSelectChange() {
    if (selectChanged) {
      update_certain_ipc_log_table();
      selectChanged = false;
    }
    requestAnimationFrame(checkSelectChange);
  }
  requestAnimationFrame(checkSelectChange);
  // 更新表格
  function update_certain_ipc_log_table() {
    // 建立預設的 dataToUse 物件
    let dataToUse = {
      ...defaultData,
      ajax: {
        ...defaultData.ajax,
        data: function(data) {
          sending_data_to_api_log_file_list.search = data.search.value;
          return JSON.stringify(sending_data_to_api_log_file_list);
        },
      },
    };
    // 如果 certain_ipc_log_table 已存在,就銷毀它
    if (certain_ipc_log_table) {
      certain_ipc_log_table.destroy();
      $("#certain_ipc_log_table_example").empty();
    }
    // 創建新的表格
    certain_ipc_log_table = $("#certain_ipc_log_table_example").DataTable(dataToUse);
  }
});
這個改進的版本將初始化表格的邏輯與更新表格的邏輯分開,避免了可能的遞迴問題。在 change 事件和初始化時都調用了 update_certain_ipc_log_table 函式,確保了表格的一致性。請根據你的實際需求和代碼結構進行調整。
來自 GPT 的回答,供參考
這個好像不行捏,還是有** Uncaught RangeError: Maximum call stack size exceeded**
我是照大神說的,用update_certain_ipc_log_table函式
並把defaultData 變全域
以下是修改的代碼:
$(document).ready(() => {
    const getToken = localStorage.getItem("token");
    
    var rowData;
    var selectedDeviceId;
  
    console.trace("取得令牌", getToken);
    newValue = localStorage.getItem("newValue");
    
    var accountType = localStorage.getItem("acc_type");
    var certain_ipc_log_table ;
  
    let sending_data_to_api_log_file_list= {
        "draw": 1,
        "length": 10,
        "start": 0,
        "device_id": "",
        "search": "",
        "start_datetime": "",
        "end_datetime": ""
      }
  
      let df = {
        draw: 0,
        columns: ["device_id", "name", "group"],
      };
    
    
    $.ajax({
        type: "post",
        url: newValue + '/api/ipc/select',
        async: true,
        headers: {
            "Content-Type": "application/json",
            "accept": "application/json",
            Authorization: "Bearer " + getToken,
        },
        data: JSON.stringify(df),
        success: function (res) {
            
            console.trace('成功檢查');
            console.trace("回傳結果", res);
    
            var selectElement = document.getElementById("exampleFormControlSelect1");
    
            selectElement.innerHTML = "";
    
            var defaultOption = document.createElement("option");
            defaultOption.textContent = "Server";
            defaultOption.value = ''; // 將值設置為空字符串
            defaultOption.dataset.device_id = ''; // 將 dataset.device_id 設置為空字符串
            selectElement.appendChild(defaultOption);
    
            res.data.forEach(function (item) {
                var option = document.createElement("option");
    
                // 將選項的文本內容設置為 group、device_id 和 name 的組合
                option.textContent = item.group + " - " + item.device_id + " - " + item.name;
    
                // 將個別值存儲在後續使用的數據屬性中
                option.dataset.group = item.group;
                option.dataset.device_id = item.device_id;
                option.dataset.name = item.name;
  
                temp_device_id= item.device_id
                console.trace("item.device_id;",temp_device_id)
    
                selectElement.appendChild(option);
            });
        },
        error: function (error) {
            console.trace("錯誤", error);
        }
    });
    
    // create_certain_ipc_log_table();   // 網頁剛加載時,默認的日誌表是用於服務器的
    update_certain_ipc_log_table();
  
    // 監聽下拉選單的 change 事件
    var selectChanged = false; // 添加一個標誌來檢測下拉選單是否已更改
  
    // 監聽下拉選單的 change 事件
    
    $("#exampleFormControlSelect1").change(function() {
        // 獲取所選擇的選項元素
        var selectedOption = $(this).find(":selected");
        selectChanged = true; // 在下拉選單更改事件中將標誌設置為 true
    
        // 從所選擇的選項元素的數據集中獲取 device_id 的值
        selectedDeviceId = selectedOption.data("device_id");
    
        console.trace("選取的設備 ID:", selectedDeviceId);
        selectedDeviceId = selectedOption.data("device_id").toString(); // 轉換為字符串
  
          sending_data_to_api_log_file_list.device_id = selectedDeviceId;
    
        console.trace("更新後的 sending_data_to_api_log_file_list:", sending_data_to_api_log_file_list);
  
        certain_ipc_log_table = $("#certain_ipc_log_table_example").DataTable()
            certain_ipc_log_table.destroy();
    $("#certain_ipc_log_table_example").empty();
    
        // 調用函數以使用更新後的 sending_data_to_api_log_file_list 創建 certain_ipc_log_table
        if (selectChanged) {
            // create_certain_ipc_log_table(sending_data_to_api_log_file_list);
            update_certain_ipc_log_table(sending_data_to_api_log_file_list);
            selectChanged = false; // 重置標誌為 false
        }
    });
    
    function checkSelectChange() {
        if (selectChanged) {
            // 移除 create_certain_ipc_log_table(sending_data_to_api_log_file_list);
            certain_ipc_log_table.destroy();
            $("#certain_ipc_log_table_example").empty();
            certain_ipc_log_table = $("#certain_ipc_log_table_example").DataTable(dataToUse);
            selectChanged = false; // 重置標誌為 false
        }
        requestAnimationFrame(checkSelectChange);
    }
  
    requestAnimationFrame(checkSelectChange); // 開始檢查
    
     // 監控變更
  function checkSelectChange() {
    if (selectChanged) {
      update_certain_ipc_log_table();
      selectChanged = false;
    }
    requestAnimationFrame(checkSelectChange);
  }
  requestAnimationFrame(checkSelectChange);
  // 更新表格
  function update_certain_ipc_log_table() {
    // 建立預設的 dataToUse 物件
    let dataToUse = {
      ...defaultData,
      ajax: {
        ...defaultData.ajax,
        data: function(data) {
          sending_data_to_api_log_file_list.search = data.search.value;
          return JSON.stringify(sending_data_to_api_log_file_list);
        },
      },
    };
    // 如果 certain_ipc_log_table 已存在,就銷毀它
    if (certain_ipc_log_table) {
      certain_ipc_log_table.destroy();
      $("#certain_ipc_log_table_example").empty();
    }
    // 創建新的表格
    certain_ipc_log_table = $("#certain_ipc_log_table_example").DataTable(dataToUse);
  }
  
  });
  const getToken = localStorage.getItem("token");
    
  var rowData;
  var selectedDeviceId;
  console.trace("取得令牌", getToken);
  newValue = localStorage.getItem("newValue");
  let defaultData = {
    processing: true,
    lengthChange: true,
    serverSide: true,
    lengthMenu: [10, 100],
    bDestroy: true,
    ajax: {
        url: newValue + '/api/log/files/list',
        type: "POST",
        contentType: 'application/json',
        data: function(d) {
            d.search = d.search.value;
            console.trace(d);
            d.order_by = defaultOrder;
            d.order_column = defaultOrderColumn;
            console.trace("d.order_by", d.order_by);
            console.trace("d.order_column", d.order_column);
            return JSON.stringify(d);
        },
        headers: {
            Authorization: "Bearer " + getToken,
        }
    },
    columns: [
        { data: "filepath", title: "filepath" },
        { data: "filename", title: "filename" },
        { data: "extension", title: "extension" },
        { data: "modified", title: "modified" },
        { data: "size", title: "size" },
        {
            data: null,
            title: accountType === "OP" ? "" : "操作",
            visible: accountType !== "OP",
            render: function (data, type, row) {
                if (accountType === "OP") {
                    return "";
                } else {
                    return (
                        '<button type="button" class="btn btn-outline-light btn-edit-delete" id="Edit_Data" data-toggle="modal" data-target="#exampleModal" data-whatever="" onclick="download_certain_ipc_log_to_txt(' + selectedDeviceId + ', \'' + row.filepath + '\', \'' + row.filename + '\')">下載</button>'
                    );
                }
            },
        }
    ],
    error: function(xhr, status, error) {
        console.trace("xhr 錯誤: ", xhr.responseText);
        console.trace("狀態 錯誤: ", status);
        console.trace("錯誤 錯誤: ", error);
    }
};