绘制数据表卡在循环中,继续显示处理

draw datatable stuck into the loop, keep showing processing

提问人:080_coder_from_jap 提问时间:8/7/2023 更新时间:8/7/2023 访问量:17

问:

演示视频,您可以观看这个 13 秒的视频

表 “table()” 保持循环

d=table 的数据已正确捕获,但处理网格已显示(ᗒᗣᗕ)՞

function table(sending_json) {
  const getToken = localStorage.getItem("token");

  var defaultData = {
    processing: true,
    lengthChange: true,
    serverSide: true,
    pageLength: 5,
    lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
    bDestroy: true,

    ajax: {
      url: newValue + '/api/log/files/list',
      type: "POST",
      contentType: 'application/json',
      data: function(d) { // Use 'data' instead of 'd'
        d.search = d.search.value; 
        console.log(d);
        return JSON.stringify(d);
      },
      headers: {
        Authorization: "Bearer " + getToken,
      },
      dataSrc: function (response) {
        console.log("DATA for table ", response);
        return response.data;
      }
    },

    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" ? "" : "ACTION",
        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 + '\')">Download</button>'

            );
          }
        },
      }
    ],

    error: function(xhr, status, error) {
      console.log("xhr ERROR: ", xhr.responseText);
      console.log("status ERROR: ", status);
      console.log("error ERROR: ", error);
    }
  };

  var dataToUse = sending_json
    ? {
      ...defaultData,
      ajax: {
        ...defaultData.ajax,
        data: function(data) {
          sending_json.search = data.search.value;
          
          return JSON.stringify(sending_json);
        },
      },
    }
    : defaultData;

  // update certain_table 
  var certain_ipc_log_table_start_end_time = $("#certain_table").DataTable(dataToUse);

  // draw new table
  certain_ipc_log_table_start_end_time = $("#certain_table").DataTable(dataToUse);
  certain_ipc_log_table_start_end_time.draw();
}
function handleEndDateInput() {
  // Get the end date input element
  const endDateInput = document.getElementById("datepicker-end");
  const startDateInput = document.getElementById("datepicker-start");

  // Wait for 1 second to allow the user to finish typing
  setTimeout(() => {
  const endDate = endDateInput.value;
  const startDate = startDateInput.value;
  console.log("Start Date:", startDate);
  console.log("End Date:", endDate);
  
  // your code to send start and end dates to the server goes here
  const convertDateFormat_startDate = convertDateFormat(startDate);
  const convertDateFormat_endDate = convertDateFormat(endDate);

  console.log("convertDateFormat_startDate", convertDateFormat_startDate);
  console.log("convertDateFormat_endDate", convertDateFormat_endDate);
  // update JSON
  sending_json.start_datetime = convertDateFormat_startDate;
  sending_json.end_datetime = convertDateFormat_endDate;

  console.log("after 1 sec , run table()");
  setTimeout(() => {
  table(sending_json);
  console.log("sending_json", sending_json);
  }, 1000);
}, 1000);
}




setTimeout(() => {
  const endDate = endDateInput.value;
  const startDate = startDateInput.value;
  console.log("Start Date:", startDate);
  console.log("End Date:", endDate);
  
  // your code to send start and end dates to the server goes here
  const convertDateFormat_startDate = convertDateFormat(startDate);
  const convertDateFormat_endDate = convertDateFormat(endDate);

  console.log("convertDateFormat_startDate", convertDateFormat_startDate);
  console.log("convertDateFormat_endDate", convertDateFormat_endDate);
  // update JSON's start_datetime and end_datetime
  sending_json.start_datetime = convertDateFormat_startDate;
  sending_json.end_datetime = convertDateFormat_endDate;

  
  table(sending_json);
  console.log("sending_json", sending_json);
}, 1000);

所以我根据逻辑修改了它(试图让table()退出循环),
这样“table()”函数只会被调用一次,但输出仍然是一样的இдஇ

setTimeout(() => {
  const endDate = endDateInput.value;
  const startDate = startDateInput.value;
  console.log("Start Date:", startDate);
  console.log("End Date:", endDate);
  
  // code to send start and end dates to the server goes here
  const convertDateFormat_startDate = convertDateFormat(startDate);
  const convertDateFormat_endDate = convertDateFormat(endDate);

  console.log("convertDateFormat_startDate", convertDateFormat_startDate);
  console.log("convertDateFormat_endDate", convertDateFormat_endDate);
 
  sending_json.start_datetime = convertDateFormat_startDate;
  sending_json.end_datetime = convertDateFormat_endDate;

  table(sending_json);
  console.log("sending_json", sending_json);
}, 1000);
JavaScript jQuery ajax 循环数据

评论


答: 暂无答案